Question

我在页面上有几个<img>缩略图（包含在<a>和<li>标记中）。我通过使用jQuery增加填充和更改<li>的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()，但似乎没有用。我希望填充增加不太明显。

Answer 1

最好使用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>

Answer 2

我建议使用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

Answer 3

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

<强> Here is a working fiddle

Answer 4

如果你想坚持使用你的代码进行一些小修改，我建议使用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","");
    });
});

Answer 5

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

Answer 6

如果你坚持使用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/

延长jquery方法的执行时间

6 个答案:

演示：