0

私はjquery<li>ホバー効果に取り組んでおり、jsfiddleには取り組んでいますが、テストサイトでは機能していません。つまり、「非表示」のdivがホバーに表示されていません。

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

どちらも同じリソース、htmlとcssを持っていますが、唯一の違いは<script>、テストサイトのヘッド領域のjsの周りに開始タグと終了タグを追加したことです。

ファイアバグにエラーはありません。

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

なぜそれを使用する必要があるのですか？

回答:ドキュメントが完全に読み込まれるとすぐに、すべてのイベント ハンドラーを関連する要素にバインドします。他のイベントもこの目的で使用されます。

于 2013-01-09T07:57:59.317 に答える
0

@jai からの最初のコメントの提案を実装しましたが、うまくいったようです:

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

どうもありがとうございます。その質問は、いくつかの回答が得られるまでに 30 秒もかからなかったに違いありません。ありがとうございます。

于 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 に答える