jQuery幻灯片html元素

jQuery slide html element

本文关键字：元素 html 幻灯片 jQuery      更新时间：2023-09-26

我正在为沿着网页左侧垂直运行的社交导航栏制作一个基本的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;
}

将其添加到您的CSS:

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

在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;
}

这是现场演示。

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

相关文章：