CODEWITHSUNDEEP
javascriptjquerycss
user3870724
user3870724

Reputation: 65

extending the execution time of jquery method

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.

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

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

Upvotes: 2

Views: 165

Answers (6)

dfsq
dfsq

Reputation: 193291

It's better to go with 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>

Upvotes: 1

Howard Renollet
Howard Renollet

Reputation: 4739

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

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

Upvotes: 0

Jevgenijs Vaikulis
Jevgenijs Vaikulis

Reputation: 686

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

Upvotes: 0

Jmh2013
Jmh2013

Reputation: 2777

If you'd like to stick to the code you have with some minor modifications, I'd suggest using 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","");
    });
});

Upvotes: 0

lhan
lhan

Reputation: 4635

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.

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

Upvotes: 0

Filipe
Filipe

Reputation: 1798

I recommend CSS3 to do it:

.film_list{
    padding: 0;
    background-color:transparent;
    transition: padding .5s ease, background-color .5s ease;
}

.film_list:hover{
    padding: 2%;
    background-color:#A8383B;
}

JSFiddle

Upvotes: 1

Related Questions