CODEWITHSUNDEEP
jquery
Fr0z3n
Fr0z3n

Reputation: 1576

jQuery Animation on multiple items

On the page i have multiple thumbs images, each has it's own id, generated by php.

I need to do the jQuery animation for each element.

I'm stuck here, how i can detect witch thumb_id-?? the user is hovering, and animate it?

I know i can do two simple js function for onmouseover/out and pass the id.. but there is another method of doing it with jQuery?

<script>
$(document).ready(function(){
    $('#thumb_id- ??? ').mouseover(function(){
                div = $('div.thumb-img-hover');
                div.animate({opacity: '1'}, 150);
    }).mouseout(function(){
                div.animate({opacity: '0'}, 150);
    });
});
</script>

foreach($arr as $val){
    echo '  
    <a class="group1" text="TESTING" title="" href="'.$baseurl.'uploads/'.$val["filename"].'">
    <div class="thumb-img-container right">
    <div class="thumb-img" style="position:relative;background:url(\''.$baseurl.'uploads/thumbs/'.$val["filename"].'\') no-repeat center center;background-size: cover;">
    <div id="thumb_id-'.$val["id"].'" class="thumb-img-hover"><a href="'.$baseurl.'index.php?action=image&id='.$val["id"].'">test</a></div>
    </div>
    </div>
    </a>
    ';
}

Upvotes: 2

Views: 123

Answers (1)

Ram
Ram

Reputation: 144729

You can use attribute starts with selector, $('div[id^=thumb_id]'), but why not using class selector?

$(document).ready(function(){
    $('div.thumb-img-hover').mouseenter(function(){
         $(this).stop().animate({opacity: '1'}, 150); // this refers to the current element
    }).mouseleave(function(){
         $(this).stop().animate({opacity: '0'}, 150);
    });
});

You can also use CSS:

div.thumb-img-hover {
   opacity: 0.5;
   -webkit-transition: opacity 150ms;  
   -moz-transition: opacity 150ms; 
   -o-transition: opacity 150ms;  
   transition: opacity 150ms;
}
div.thumb-img-hover:hover {
    opacity: 1;
}

Upvotes: 3

Related Questions