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

时间:2013-09-12 16:46:06

标签: jquery jquery-cycle

好的,所以我在我的图像上正确地使用了windowX,但是在第一次初始加载时,图像收缩并在顶部消失,然后加载另一个图像,然后它最终完成了windowX图像..是否存在第一个动画甚至与curtainX效果无关的原因?

        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进入过程中,而且windowX仍然会这样做: http://intellectproductions.com/test/html.html

我真的需要这个才能工作,因为我需要对我的图像进行翻转效果。

1 个答案:

答案 0 :(得分:1)

在@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);