CODEWITHSUNDEEP
jqueryjquery-effects
MG1
MG1

Reputation: 1687

jQuery animate image swap

I'm looking to have an image swap inside an image gallery in a way that when a user hovers over an image it grows in size and swaps out the image. At the moment its working but it does a very soft fadeIn and fadeOut effect. How can I change this so that its a faster transition and the image actually looks like its growing in size?

HTML

<li class="carousel-img" 
    data-alt-src="<?php the_sub_field('carousel_image_hover');?>" 
    style="background-image:url( <?php the_sub_field('carousel_image');?> )"
>

jQuery

jQuery(document).ready(function(e) {
         var bkgd_bl = "";
         jQuery('#carousel a li').hover(function() {

             var bkgd = "url('" + jQuery(this).attr('data-alt-src') + "')";
             bkgd_bl = jQuery(this).css('background-image');

             jQuery(this).stop().fadeOut("1000", function() {
                 jQuery(this).css({
                     "background-image": bkgd,
                     "height": 223,
                     "width": 449 }).fadeIn(1000); //alert(bkgd_bl);
             });
            }, function() {
                jQuery(this).stop().fadeOut("1000", function() {
                    jQuery(this).css({
                        "background-image": bkgd_bl,
                        "height": 172,
                        "width": 265 }).fadeIn(1000);
                });
            });
        });

Upvotes: 1

Views: 911

Answers (1)

entio
entio

Reputation: 4263

maybe just change

fadeIn(1000);

to faster? 300? If that's waht You want.. Show some fiddle.

at the very bottom of http://iab.org.pl/ You`ll se logotypes, is that the effect You wanna achieve?

Upvotes: 1

Related Questions