CODEWITHSUNDEEP
phpjavascriptimagefade
samyb8
samyb8

Reputation: 2598

Adding a fade in effect to an image just loaded using javascript

I have the following javascript code that changes the image in a div for a different one every time the user places the mouse on top of a thumbnail.

My question is, how can I apply a fade-in effect so the image change is nicer?

Thanks

JS:

$('#thumbs').delegate('img', {
mouseover: function(){
    $('.mainImage').attr('src',$(this).attr('src').replace('thumb','image'));
    var $this = $(this),
    index = $this.index();
    $("#thumbs img").removeClass('thumbSelected');
        $this.addClass('thumbSelected');
}});

PHP:

<div id="thumbs">
<img class="thumbSelected" src="http://www.tahara.es/images/<?php echo $row2[thumb1]; ?>.jpg"  /><br />
<img src="http://www.tahara.es/images/<?php echo $row2[thumb2]; ?>.jpg"  /><br />
<img src="http://www.tahara.es/images/<?php echo $row2[thumb3]; ?>.jpg"  />
</div>


<div class="mainImage magnify">
<div class="large"></div><a href="http://www.tahara.es/images/<?php echo $row2[image1]; ?>.jpg" rel="lightbox" title="<?php echo $row2[name]; ?>">
<img class="mainImage small" src="http://www.tahara.es/images/<?php echo $row2[image1]; ?>.jpg" />
</a>
</div>

Upvotes: 0

Views: 1292

Answers (2)

ajameswolf
ajameswolf

Reputation: 1660

Check out Jquery animate .. http://api.jquery.com/animate/ You can configure duration, easing (which is what you are probably missing) and completion call back (add an additional animation when the first is complete like increase opacity from .8 to 1)

It is really a matter of how you want it to look, but animate would do better than the fadeIn

Upvotes: 0

grepsedawk
grepsedawk

Reputation: 3411

In your example, I beleive:

$('#big-image img').fadeIn(300);

Will work.

If not, it's just:

$('#imgid').fadeIn(300);

Or:

$('#.classname').fadeIn(300);

Upvotes: 1

Related Questions