حدد تأخير الوقت بين إطارين على Mouseover
-
30-09-2019 - |
سؤال
لا بد لي من عرض صورتين للفرد mouseover
. لذلك عندما أنا mouseover
إلى الصورة ، أولاً ، يتم عرض الصورة ثم مع تأخير زمني قدره 5000 ، هناك حاجة إلى الصورة لعرضها لنفس التحويم. من الآن mouseout
عرض الصورة الأصلية.
أنا لست على دراية بجافا سكريبت و jquery.
هل يمكن لأي شخص أن يعطيني فكرة عن كيفية القيام بذلك.
ما فعلته هو ،
$('.image1').mouseover(function() {
setInterval($(this).removeClass(.image1).addClass('image-over1'),5000);
$(this).removeClass(.image1).addClass('image-over2');
});
$('.image1').mouseout(function() {
$(this).removeClass('image-over1');
$(this).removeClass('image-over2').addClass(item);
});
$('.image1').click(function(){
document.location='index.php?page='index.php';
})
المحلول
ال .hover()
تتيح لك الوظيفة تحديد كل من Mouseover/Mouseout في نفس الوقت ، وتحتاج إلى عمل وظيفة لـ setInterval
:
$('.image1').hover(function(evt) {
// mouse over function.
// DOM Element that got the mouseover.
var target = evt.target;
if (target.timer) {
clearTimeout(target.timer);
target.timer = null;
}
target.timer = setInterval(function() {
// $(this) will not work here, since 'this' has changed.
// depending on your css you shouldn't need to remove the '.image1'
// class, just make sure .image-over1 and .image-over2 are
// stronger selectors, or occur after .image1
$('.image1').addClass('image-over2');
// at this point your element will be (just guessing <img>, could be
// anything really:
// <img class="image1 image-over1 image-over2" .../>
// it's absolutely fine for the image to have all those classes as
// long as your css is correct.
}, 5000);
$('.image1').addClass('image-over1');
}, function(evt) {
// mouse out function.
// DOM Element that got the mouseout.
var target = evt.target;
if (target.timer) {
clearTimeout(target.timer);
target.timer = null;
}
$('.image1').removeClass('image-over1');
$('.image1').removeClass('image-over2');
});
$('.image1').click(function(){ document.location='index.php?page='index.php'; })
نصائح أخرى
بادئ ذي بدء ، أعتقد أن هناك مشكلة في نهجك ؛ إذا قمت بإزالة فئة "Image1" من العنصر الموجود على الماوس ، فلن يتم مطابقة هذا العنصر من خلال محدد $ (". image1") لـ mouseout. هل هناك سبب تحتاج إلى إزالته؟ إذا قمت بذلك (أي إذا كان هناك شيء محدد على الفصل في CSS تحتاج إلى تعطيله) ، فهل هناك بعض المحددات الأخرى التي يمكنك مطابقة؟
فيما يتعلق بالتأخير الزمني ، إذا كنت تستخدم إصدار jQuery أكبر من 1.4 ، يمكنك استخدام وظيفة .delay ():
$('.image1').mouseover(function() {
$(this).addClass('image-over1').delay(5000).addClass('image-over2');
});
ربما لك لإنشاء صورة متحركة من هذه الصور ؟؟؟ ثم استخدم رمزًا مشابهًا هنا: http://www.netmechanic.com/news/vol3/design_no10.htm
حتى إذا تم إنشاء الصور أثناء الطيران ، فمن الممكن إنشاء GIF المتحركة في PHP - انظر http://php.net/manual/en/function.imagegif.php