jQuery 幻灯片 html 元素

Question

我正在为沿网页左侧垂直运行的社交导航栏制作基本 div。

我试图让每个人 div 在鼠标悬停在它上面时向右滑动到 width: 64px;，当鼠标离开它时 return 到正常宽度。

        <div class="social-buttons">
            <div class="social-btn"><b>f</b></div>
            <div class="social-btn"><b>G+</b></div>
            <div class="social-btn"><b>T</b></div>
            <div class="social-btn"><b>E+</b></div>
        </div><!-- end of social-buttons -->

.social-btn {
    display: block;
    border-radius: 0px;
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    background: #206999;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 48px;
    height: 48px;
    text-decoration: none;
}

Answer 1

像这样在 CSS 上添加悬停元素

.social-btn {
    display: block;
    border-radius: 0px;
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    background: #206999;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 48px;
    height: 48px;
    text-decoration: none;
}
.social-btn:hover {
 width: 64px;
}

Here is Live Demo.

Answer 2

您是否希望像这样使用 JQuery 为宽度设置动画？ https://jsfiddle.net/1nL9mq69/2/

$(document).ready(function() {

    $(".social-btn").on("mouseenter", function() {
        $(this).animate({"width":"64px"}, 200);
    });

    $(".social-btn").on("mouseleave", function() {
         $(this).stop();
         $(this).animate({"width":"48px"}, 200);
    });

});

200 参数控制动画运行多长时间（以毫秒为单位），因此您可以更改它以使其滑出得更快或更慢。

Answer 3

将此添加到您的 CSS：

  .social-btn:hover {
width: 64px;
transition-property: width;
transition-duration: 1s;
}

  .social-btn {
transition-property: width;
transition-duration: 1s;
}

jQuery 幻灯片 html 元素

jQuery slide html element

html

javascript

css

jquery

slide