jQuery slide html element

Question

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

当您将鼠标悬停在div上时，我会尝试将每个width: 64px;向右滑动到 <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; } ，并在鼠标离开时返回正常宽度。

ONLY

Answer 1

将此添加到您的CSS：

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

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

Answer 2

像这样在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 3

您是否希望使用这样的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参数控制动画运行的时间长度（以毫秒为单位），因此您可以更改它以使其更快或更慢地滑出。