0

我正在研究 jquery<li>悬停效果，它正在 jsfiddle 上工作，但不在测试站点上，即“隐藏”div 未在悬停时显示。

http://jsfiddle.net/rwone/p4xXH/

两者都有相同的资源，html 和 css，唯一的区别是我<script>在测试站点的头部区域的 js 周围添加了开始和结束标记。

firebug 没有错误。

是否可以使用 jsfiddle 中的所有 js 代码并仅<script>在其周围包裹标签，或者这是否会导致一些可能阻止悬停效果起作用的语法错误？

这是我在测试站点上使用的代码（没有可用的链接）。 

<script>
// begin hover functionality
$(".magic li").each(function() {

var hiddenDiv = $(this).find(".card"),
parentElement = $(this),
api = {};

api.isOpen = false;

api.timeout = null;

api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#non_scrollable_area").offset().top - 106,
"left": parentElement.offset().left - $("#non_scrollable_area").offset().left - 94 
});
}

api.resetTimeout = function(){

clearTimeout( api.timeout );
}

api.startShowing = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.show();        
},200);
}

api.startHiding = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.hide();        
},150);
}
api.show= function(){

if(!api.isOpen){

api.position();

hiddenDiv .fadeIn(300);

api.isOpen = true;

// $("#isotope_container").bind("scroll.hiddendiv",api.position);

}
}

api.hide = function(){

if( api.isOpen ) {
api.isOpen = false;
// $("#isotope_container").unbind("scroll.hiddendiv");     
hiddenDiv.fadeOut(100);
}

}

hiddenDiv.bind("mouseenter", function() {

api.resetTimeout();

}).bind("mouseleave", function() {

api.startHiding();

}).css("z-index", 100).appendTo("#non_scrollable_area"); 

$(this).data("hiddenApi",api );

}).bind("mouseenter", function() {

var api = $(this).data("hiddenApi");

api.startShowing();

}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element

var api = $(this).data("hiddenApi");

api.startHiding();

});

// begin custom scrollbar
(function($){
$(document).ready(function(){
$(".holder_a, .holder_b, .holder_c, .holder_d").mCustomScrollbar({
set_width:false, 
set_height:false, 
horizontalScroll:true, 
scrollInertia:550, 
scrollEasing:"easeOutCirc", 
mouseWheel:"auto", 
autoDraggerLength:true, 
scrollButtons:{ 
enable:false, 
scrollType:"continuous", 
scrollSpeed:20, 
scrollAmount:40 
},
advanced:{
updateOnBrowserResize:true, 
updateOnContentResize:false, 
autoExpandHorizontalScroll:false, 
autoScrollOnFocus:true 
},
callbacks:{
onScrollStart:function(){}, 
onScroll:function(){}, 
onTotalScroll:function(){}, 
onTotalScrollBack:function(){}, 
onTotalScrollOffset:0, 
whileScrolling:false, 
whileScrollingInterval:30 
}
});
});
})(jQuery);
</script>
4

4 回答 4

1

在您的小提琴中，代码已onload根据“框架”下左侧的下拉列表包含在处理程序中。在您的测试站点中没有onload处理程序。这就是他们行为不同的原因。

您需要将脚本包含在文档末尾</body>（就在结束标记之前）或将其包装在$(document).ready()处理程序中。

如果你把你的脚本放在<head>没有准备好文档的情况下（或者onload对于老式的非 jQuery 代码），那么它就不能访问任何元素，因为它们还没有被解析并添加到 DOM 中。

于 2013-01-09T07:57:37.230 回答
1 
$( function() {

// All Your JS Code here

});

在 JS Fiddle 他们已经拥有$(window).load( function() { });但你没有，$(document).ready( function() { });或者$( function() { });这是添加$(document).ready( function() { });事件处理程序的另一种方式！

我为什么要使用它？

Ans：一旦文档完全加载，它将所有事件处理程序绑定到关联的元素。其他事件也用于此目的。

于 2013-01-09T07:57:59.317 回答
0

我已经实施了@jai 的第一个评论建议，它似乎奏效了：

put everything in $(document).ready(function(){--here--});

非常感谢，这个问题应该是不到三十秒才得到几个答案，谢谢！

于 2013-01-09T08:01:48.277 回答
0

尝试使用这个：

<script type='text/javascript'>
  $(document).ready(function(){
    $(".magic li").each(function () {

    var hiddenDiv = $(this).find(".card"),
    parentElement = $(this),
    api = {};

    api.isOpen = false;

    api.timeout = null;

    api.position = function () {
        hiddenDiv.css({
            "top": parentElement.offset().top - $("#non_scrollable_area").offset().top - 106,
            "left": parentElement.offset().left - $("#non_scrollable_area").offset().left - 94
        });
    }

    api.resetTimeout = function () {

        clearTimeout(api.timeout);
    }

    api.startShowing = function () {

        api.resetTimeout();

        api.timeout = setTimeout(function () {
            api.show();
        }, 200);
    }

    api.startHiding = function () {

        api.resetTimeout();

        api.timeout = setTimeout(function () {
            api.hide();
        }, 150);
    }
    api.show = function () {

        if (!api.isOpen) {

            api.position();

            hiddenDiv.fadeIn(300);

            api.isOpen = true;

        // $("#isotope_container").bind("scroll.hiddendiv",api.position);

        }
    }

    api.hide = function () {

        if (api.isOpen) {
            api.isOpen = false;
            // $("#isotope_container").unbind("scroll.hiddendiv");     
            hiddenDiv.fadeOut(100);
        }

    }

    hiddenDiv.bind("mouseenter", function () {

        api.resetTimeout();

    }).bind("mouseleave", function () {

        api.startHiding();

    }).css("z-index", 100).appendTo("#non_scrollable_area");

    $(this).data("hiddenApi", api);

}).bind("mouseenter", function () {

    var api = $(this).data("hiddenApi");

    api.startShowing();

}).bind("mouseleave", function () { // start closing timeout once mouse leaves isotope element

    var api = $(this).data("hiddenApi");

    api.startHiding();

   });
});
</script>
于 2013-01-09T08:03:01.240 回答