延长jquery方法的执行时间

I have couple of <img> thumbnails on a page (wrapped in <a> and <li> tags). I am highlighting thumbnails on hover by increasing padding and changing bg color of the <li>s, using jQuery.

我在页面上有几个延长jquery方法的执行时间缩略图（包含在和

标签中）。我通过使用jQuery增加填充和更改

标签中）。我通过使用jQuery的增加填充和更改

的bg颜色来突出显示悬停的缩略图。

的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>

here is my jQuery:

这是我的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>

This code is working fine, but transitions on hover are happening too quickly and appear jittery. I'd like it to slow down. I tried delay(), but it didn't seem to work. I want the padding increase to be less noticeable.

此代码工作正常，但悬停过渡发生得太快，显得紧张。我希望它能减速。我试过延迟（），但它似乎没有用。我希望填充增加不那么明显。

6 个解决方案

#1

I recommend CSS3 to do it:

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

的jsfiddle

#2

It's better to go with CSS:

最好使用CSS：

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

Demo:

.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>

#3

CSS may be the way to go as others have pointed out but if you're looking to only modify the code you already have, you can use setTimeout. Note the 2nd parameter to setTimeout is the number of milliseconds to wait before the function is called, so you can change that to whatever you want. Also, if you want the delay to happen on hover as well, you can add the same functionality there.

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.

这是一个工作小提琴。

#4

If you'd like to stick to the code you have with some minor modifications, I'd suggest using jquerys animate()

如果你想坚持使用你的代码进行一些小修改，我建议使用jquerys animate（）

JSFiddle

的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","");
    });
});

#5

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

#6

If you insist on using jquery - you can use animate to achieve your desired results:

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

fiddle: http://jsfiddle.net/ffL1swzy/

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

#1

I recommend CSS3 to do it:

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

的jsfiddle

#2

It's better to go with CSS:

最好使用CSS：

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

Demo:

.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>

#3

$('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.

这是一个工作小提琴。

#4

If you'd like to stick to the code you have with some minor modifications, I'd suggest using jquerys animate()

如果你想坚持使用你的代码进行一些小修改，我建议使用jquerys animate（）

JSFiddle

的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","");
    });
});

#5

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

#6

If you insist on using jquery - you can use animate to achieve your desired results:

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

fiddle: http://jsfiddle.net/ffL1swzy/

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

秒客网

延长jquery方法的执行时间

6 个解决方案

#1

#2

Demo:

#3

#4

#5

#6

#1

#2

Demo:

#3

#4

#5

#6

相关文章