JQuery Hover: يتلاشى في DIV خفية بينما يتلاشى "الافتراضي"

Question

لدي اثنين divs (واحد منهم مخبأة مع CSS)، التي أتلاشى داخل وخارجها داخل الفضاء المشترك، على التحوم.

هذه هي العلامة:

<div id="wrap">

    <div class="image">
        <img src="http://domain.com/images/image.png">
    </div>

    <div class="text hide">
        <p>Text text text</p>
    </div>

</div>

وكنتقلي رمز مسج هذا لتتلاشى الصورة - ويتلاشى في النص، على التحويم:

<script type="text/javascript">
$(function(){
$('#wrap').hover(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        },
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

لكن المشكلة هي أن DIV النص يحصل لزجة ولن تتلاشى - دائما أن حركة الماوس سريعة جدا.

هل تعرف أين يمكن أن يكون الحل لهذا؟

قمت بإعداد اختبار عبر الإنترنت: http://paraptape.org/stickytext/test.html.

شكرا لأي نصيحة

Answer 1

إذا كان Wrapper الخاص بك لا يحتوي على عرض وارتفاعه، فقد تحصل على بعض النتائج الغريبة لأنها تقلصت بمجرد إزالة عنصر الصورة. لنرى، إضافة الحدود والارتفاع / العرض الثابت حول التفاف. أو على الأقل استخدام نفس الارتفاع للصورة والسحب النصية.

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

تحريرها

تمت إزالة مثال التعليمات البرمجية الذي لم ينطبق على ما تحاول إنجازه.

Answer 2

جرب استخدام .قف() على وظيفة التحويم الخاصة بك، والتي سيمنع حالة السباق حيث تحرك بسرعة الماوس بسرعة على Divs

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').stop().fadeOut(100, function(){
               $('#wrap.image').stop().fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 3

حاول استخدام قائمة الانتظار:

<script type="text/javascript">
$(function(){
    $('#wrap').hover(
        function(){
            $('#wrap .image').stop(true).fadeOut(100);
            $('#wrap .image').queue(function(){
                $('#wrap.text').fadeIn(100);
                $(this).dequeue();
            });
        },
        function(){
            $('#wrap .image').stop(true).queue(function(){
                $('#wrap.text').fadeOut(100);
                $(this).dequeue();
            });
            $('#wrap .image').fadeIn(100);
        }
    );
});
</script>

قائمة انتظار JQuery هي لكل عنصر، لذلك ما أحاول القيام به هنا هو إطلاق تأثيرات النص ضمن قائمة انتظار الصورة.

واسمحوا لي أن أعطيك اقتراح آخر. إذا كانت نيتك هي تطبيق هذا التأثير على الصور المختلفة استخدام الفئة بدلا من المعرف.

...
    $('.wrap').hover(
        function(){
            var wrap = this;
            $('.image', wrap).stop(true).fadeOut(100);
            $('.image', wrap).queue(function(){
                $('.text', wrap).fadeIn(100);
                $(this).dequeue();
            });
....

بهذه الطريقة تحتاج فقط إلى الاتصال به مرة واحدة.

Answer 4

الكود الخاص بك لا يتلاشى لا يخرج النص. ستتلاشى كلا الوظيفتين لحدث التحويم الصورة وتتلاشى في النص.

Answer 5

لديك نفس الكود في كليهما hover المهام. يجب ألا تحل محل المحددين في الحالة الثانية؟

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').fadeOut(100, function(){
               $('#wrap.image').fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 6

شكرا لجميع النصائح:

حاولت استخدام أحداث Mouseenter / Mouseleave، لأنها تبدو تفصيلا بالتفصيل مقابل Divs، يتعاملون معهم (كما رأينا هنا)، ولكن لم يتغير شيء. لذا، راجع أن جميع التعليمات المسج المعتادة التي لم تستجب فيها كما اقترح CSS الخاص بي.

وكان هناك خدعة.

ما كان لدي:

.text p{position:relative; top:-370px; padding: 0 10px}

كان إعداد مساحة فارغة ضخمة، حيث كان المتصفح يفسر بأنه "غير مغادرتين لا يزال" من قبل المؤشر (لاحظت أن الإفراط في جعل هذه المساحة الفارغة كانت تجعل النص للاستجابة بشكل صحيح).

لذلك تغيرت إلى ذلك:

.text {margin-top:-370px; padding: 0 10px; float:left}

والتي تتيح العلامة "P" وحدها، ومواقف المجموعة الثانية في DIV، ولكن دون تتبع مساحة فارغة وراءها.

ثم، بشأن المقتطف، سيعمل كذلك مع Mouseenter / Moseleave. و يحوم :

<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        }
        );
$('#wrap').mouseleave(
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

هذه هي النسخة المحسنة http://paraptape.org/nice/test.html.