jQuery Cycle Plugin curtainX 第一个动画搞砸了



好的,所以我让窗帘X在我的图像上正常工作,但就在第一次初始加载时,图像缩小并消失在顶部,然后加载另一个图像,然后它最终做了窗帘X图像..有没有理由第一个动画甚至与窗帘X效果无关?

        jQuery('.product_show').cycle({
            fx: 'curtainX',
            sync: false,
            speed: 1300,
            timeout: 2000,
            delay: 1000
        });

这是插件的主页: http://jquery.malsup.com/cycle/它在中间的第二排。它应该看起来像那样,但它只为第一个动画做了一个奇怪的动画,然后在其余时间它工作得很好。

这是我网站的视频,因为它在我的本地机器上:http://s1284.photobucket.com/user/IntellectProductions/media/LivestreamforProducers-20130912-131736_446_zpsd84e6c90.mp4.html 您可以根据我发布的代码看到动画是什么。

我甚至创建了一个没有CSS的例子,所以我们知道没有CSS进入,而curtainX仍然这样做:http://intellectproductions.com/test/html.html

我真的需要这个工作,因为我需要图像上的翻转效果。

在@A. Wolff的帮助下,这是解决方案,因为它需要保持其响应能力,并且高度不能硬编码。

    jQuery('.product_block .product_show').each(function() {
        imgHeight = jQuery(this).children(':first').height();
        jQuery(this).children(':first').height(imgHeight);
        val = jQuery(this).attr('class');
        val = val.split(' ');
        //timeout_time = val.substr(val.indexOf('-') + 1);
        timeout_time = val[1].substr(8);
        jQuery(this).cycle({
            fx: 'curtainX',
            sync: false,
            speed: 1300,
            timeout: timeout_time,
            delay: 1000
        });
        turn = turn - 3000;
    });

请注意在此处设置高度:

imgHeight = jQuery(this).children(':first').height();
jQuery(this).children(':first').height(imgHeight);

相关内容

  • 没有找到相关文章

最新更新