延长了jquery方法的执行时间

extending the execution time of jquery method

本文关键字：执行时间 方法 jquery      更新时间：2023-09-26

我在一个页面上有几个<img>缩略图（封装在<a>和<li>标签中）。我使用jQuery通过增加填充和更改<li>s的bg颜色来突出显示悬停时的缩略图。

<div id='film_container'>
   <ul>                     //echoing through php loop
      <a href='#'>
         <li class='film_list'> 
            <img class='poster' src='$poster_small'/>
            <span>$film_name</span>
         </li>
      </a>
   </ul>
</div>

这是我的jQuery:

<script>
   $(document).ready(function(){
      $('li.film_list').hover(function(){
         $(this).css("padding","2%");
         $(this).css("background-color","#A8383B");}, 
      function(){
         $(this).css("padding","");
         $(this).css("background-color","");
      });
    });
</script>

这段代码运行良好，但悬停时的转换发生得太快，看起来很不稳定。我希望它慢一点。我试过delay()，但似乎不起作用。我希望填充的增加不那么明显。

我建议CSS3这样做：

.film_list{
    padding: 0;
    background-color:transparent;
    transition: padding .5s ease, background-color .5s ease;
}
.film_list:hover{
    padding: 2%;
    background-color:#A8383B;
}

JSFiddle

最好使用CSS:

.film_list {
    background-color: #fff;
    transition: all 0.5s ease;
}
.film_list:hover {
    padding: 2%;
    background-color: #A8383B;
}

演示：

.film_list {
    background-color: #fff;
    transition: all 0.5s ease;
}
.film_list:hover {
    padding: 2%;
    background-color: #A8383B;
}
ul { list-style: none; padding: 0; margin: 0 }
body { margin: 0 }
<div id='film_container'>
    <ul>
        <li class='film_list'>
            <a href="">
                <img class='poster' src='http://lorempixel.com/100/100/animals/1' />
                <span>Travis and Biver</span>
            </a>
        </li>
    </ul>
</div>

CSS可能是其他人指出的方法，但如果您只想修改现有的代码，则可以使用setTimeout。请注意，setTimeout的第二个参数是在调用函数之前等待的毫秒数，因此可以根据需要进行更改。此外，如果您希望悬停时也发生延迟，您可以在那里添加相同的功能。

$('li.film_list').hover(function () {
    $(this).css("padding", "2%");
    $(this).css("background-color", "#A8383B");
}, function () {
    var self = $(this);
    setTimeout(function () {
        self.css("padding", "");
        self.css("background-color", "");
    }, 1000);
});

这是一把正在工作的小提琴

如果您想坚持使用经过一些小修改的代码，我建议使用jquerys animate()

JSFiddle

$(document).ready(function(){
    $('li.film_list').hover(function(){
        $(this).animate({'padding' : '2%'}, "slow");
        $(this).css("background-color","#A8383B");}, function(){
        $(this).animate({'padding' : '0'}, "slow");
        $(this).css("background-color","");
    });
});

$(document).ready(function(){
    $('li.film_list').hover(
      function(){$(this).animate({padding:"2%",backgroundColor:"#A8383B"}, 500);},
      function(){$(this).animate({padding:"0",backgroundColor:"#FFF"}, 500);}
    );
});

如果你坚持使用jquery，你可以使用animate来实现你想要的结果：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
    <body>
        <div id='film_container'>
            <ul>
                <a href='#'>
                    <li class='film_list'> 
                        <img class='poster' src='$poster_small'/>
                        <span>$film_name</span>
                    </li>
                </a>
            </ul>
        </div>
        <script>
            $(document).ready(function () {
                $("li.film_list").hover(function () {
                    $(this).filter(":not(:animated)").animate({
                        padding: "2%"
                    }, "slow");
                    $(this).css("background-color","#A8383B");
                }, function () {
                    $(this).animate({
                        padding: "0"
                    }, "slow");
                    $(this).css("background-color","");
                });
            });
        </script>
    </body>
</html>

小提琴：http://jsfiddle.net/ffL1swzy/

相关文章：