Question

以下是网址：http://174.120.239.48/~peakperf/

这是jQuery：

网站仍处于重大发展阶段。

如果将鼠标悬停在轮播上的“服务保留”中，您将看到该功能应该如何工作。在悬停时，一个span元素被淡入，鼠标移出它隐藏。有些卡住，有些工作正常。另请注意，当您单击右箭头并滚动旋转木马时，跨距会“卡住”。

任何帮助将不胜感激，谢谢！

Answer 1

您的加价无效，因为它缺少结束“a”标记（见下文）

</a>

以下是代码中的错误。

           <a href="#" id="homeslide6-show">
               <img src="http://174.120.239.48/~peakperf/wp-content/themes/strausberg/images/home_service_retention.jpg" width="200" height="92" />
          </li>
      </ul>

此外，使用each（）函数可以将jquery代码减少约90％。

例如，为你的ul添加一个id，就像这样做

<ul id="mycarousel">

    jQuery('#mycarousel').find('span').each(function(){

        jQuery(this).hover(function() {

            jQuery(this).next().fadeIn('slow');

            return false;

        }, function(){

            jQuery(this).next().fadeOut('slow');

            return false;
        });
    });

ps，此代码固定为当前的html结构，你应该使用类来使其更灵活

Answer 2

您似乎有多个具有相同ID的标签，这是不允许的。 ID为"homeslide6-show"。您还应该尝试停止动画，然后再启动并简化您的JavaScript：

jQuery(document).ready(function() {

    // hides the slickbox as soon as the DOM is ready
    jQuery('#homeslide1, #homeslide2, #homeslide3, #homeslide4, #homeslide5, #homeslide6').hide();

    // shows the slickbox on clicking the noted link Â 
    for (var i = 1; i <= 6; i++) {
        jQuery('#homeslide' + i + '-show').parent().hover(
            function(e, i) {
                jQuery('#homeslide' + i).stop(true, true).fadeIn('slow');
                e.preventDefault();
                return false;
            },
            function(e, i){
                jQuery('#homeslide' + i).stop(true, true).fadeOut('slow');
                e.preventDefault();
                return false;
            }
        );
    }
});

如果有效，请告诉我。

EDITED

我上面的javascript不正确。以下作品：

jQuery(document).ready(function() {

    // hides the slickbox as soon as the DOM is ready
    jQuery('#homeslide1, #homeslide2, #homeslide3, #homeslide4, #homeslide5, #homeslide6').hide();

    // shows the slickbox on clicking the noted link Â 
    for (var i = 1; i <= 6; i++) {
        jQuery('#homeslide' + i + '-show').parent().data({element: '#homeslide' + i}).hover(
            function() {
                var element = jQuery('element');
                jQuery(element).stop(true, true).fadeIn('slow');
                return false;
            },
            function(){
                var element = jQuery('element');
                jQuery(element).stop(true, true).fadeOut('slow');
                return false;
            }
        );
    }
});

jquery旋转木马与悬停效果

2 个答案: