Question

我希望在图像库中进行图像交换，以便当用户将鼠标悬停在图像上时，它会增大尺寸并交换图像。目前它的工作但它做了一个非常柔软的淡入淡出和淡出效果。我怎样才能更改它以使其更快的过渡并且图像实际上看起来像是在增长？

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);
                });
            });
        });

Answer 1

也许只是改变

fadeIn(1000);

更快？ 300？如果那就是你想要的......显示一些小提琴。

在http://iab.org.pl/的最底部你会看到什么样的标识，那是你想要达到的效果吗？

jQuery动画图像交换

1 个答案: