Javascript: Div başka bir div üzerinde aşağı kaydırın

Bu jsfiddle'da, "#video" div'inin tamamen kaymasını ve farenin "#wrap" ini bitene kadar kalmasını istiyorum. Ama farenin üstünde olmasına rağmen yukarı ve aşağı gidiyor. Herhangi bir fikir?

html:

<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
</div>

css:

#text
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
background: #FAAC58;
margin-left:auto;
margin-right:auto;
}

#video
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
display:none;
background: rgba(0,0,0,0.8);
}

JScript:

$(document).ready(function(){
    $("#wrap").mouseover(function(){
    $("#video").slideDown("slow");
         });
    $("#wrap").mouseout(function(){
    $("#video").slideUp("slow");
         });
});

http://jsfiddle.net/ZyUYN/1045/

0

15 cevap

Use the hover event instead of mouseover and mouseout, your mouseover get triggered many times as the mouse moves inside the div #wrap

$(document).ready(function() {
    $("#wrap").hover(function() {
        $("#video").slideDown("slow");
    }, function() {
        $("#video").slideUp("slow");
    });
});

keman

2
katma

Use the hover event instead of mouseover and mouseout, your mouseover get triggered many times as the mouse moves inside the div #wrap

$(document).ready(function() {
    $("#wrap").hover(function() {
        $("#video").slideDown("slow");
    }, function() {
        $("#video").slideUp("slow");
    });
});

keman

2
katma

Use the hover event instead of mouseover and mouseout, your mouseover get triggered many times as the mouse moves inside the div #wrap

$(document).ready(function() {
    $("#wrap").hover(function() {
        $("#video").slideDown("slow");
    }, function() {
        $("#video").slideUp("slow");
    });
});

keman

2
katma

Fare hareket halindeyken mouseover() ve mouseout() fonksiyonları sürekli olarak çağrılır. Bunun yerine mouseenter() ve mouseout() .

$("#wrap").mouseenter(function() {
    $("#video").slideDown("slow");
});
$("#wrap").mouseleave(function() {
    $("#video").slideUp("slow");
});

İşte güncellenmiş bir JSFiddle bağlantısı var.

0
katma

Fare hareket halindeyken mouseover() ve mouseout() fonksiyonları sürekli olarak çağrılır. Bunun yerine mouseenter() ve mouseout() .

$("#wrap").mouseenter(function() {
    $("#video").slideDown("slow");
});
$("#wrap").mouseleave(function() {
    $("#video").slideUp("slow");
});

İşte güncellenmiş bir JSFiddle bağlantısı var.

0
katma

Fare hareket halindeyken mouseover() ve mouseout() fonksiyonları sürekli olarak çağrılır. Bunun yerine mouseenter() ve mouseout() .

$("#wrap").mouseenter(function() {
    $("#video").slideDown("slow");
});
$("#wrap").mouseleave(function() {
    $("#video").slideUp("slow");
});

İşte güncellenmiş bir JSFiddle bağlantısı var.

0
katma

yerine mouseenter ve mouseleave kullanın. Kabarcık kabarcıklı kabarcıklarla başa çıkacak ( https://api.jquery.com/mouseenter/ )

0
katma

yerine mouseenter ve mouseleave kullanın. Kabarcık kabarcıklı kabarcıklarla başa çıkacak ( https://api.jquery.com/mouseenter/ )

0
katma

yerine mouseenter ve mouseleave kullanın. Kabarcık kabarcıklı kabarcıklarla başa çıkacak ( https://api.jquery.com/mouseenter/ )

0
katma

#video öğesi aşağıya doğru kaydırıldığında #wrap 'de görünür, böylece fare imleci #video olur ve $ ("# wrap") .geodeout tetiklendi

Bunu dene:

$(document).ready(function(){
    $("#wrap").mouseover(function(){
    $("#video").slideDown("slow");
         });
    $("#video").mouseout(function(){
    $("#video").slideUp("slow");
         });
});
0
katma
Teşekkürler @Omar Elawady
katma yazar sri, kaynak

#video öğesi aşağıya doğru kaydırıldığında #wrap 'de görünür, böylece fare imleci #video olur ve $ ("# wrap") .geodeout tetiklendi

Bunu dene:

$(document).ready(function(){
    $("#wrap").mouseover(function(){
    $("#video").slideDown("slow");
         });
    $("#video").mouseout(function(){
    $("#video").slideUp("slow");
         });
});
0
katma
Teşekkürler @Omar Elawady
katma yazar sri, kaynak

#video öğesi aşağıya doğru kaydırıldığında #wrap 'de görünür, böylece fare imleci #video olur ve $ ("# wrap") .geodeout tetiklendi

Bunu dene:

$(document).ready(function(){
    $("#wrap").mouseover(function(){
    $("#video").slideDown("slow");
         });
    $("#video").mouseout(function(){
    $("#video").slideUp("slow");
         });
});
0
katma
Teşekkürler @Omar Elawady
katma yazar sri, kaynak

#Video div'iniz #wrap div'i kapladığında mouseout olayını tetikler. Bir seçenek, #video ve #wrap öğelerinin yukarısında üçüncü bir see-through div kullanmak ve bu olayları tetiklemek için kullanmaktır:

<div id="wrap">
    <div id="text">text</div>
    <div id="video">video</div>
    <div id="cursor"></div>
</div>

$(document).ready(function(){
  $("#cursor").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#cursor").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });

Here's the updated working code: http://jsfiddle.net/tf4qhoxs/

0
katma

#Video div'iniz #wrap div'i kapladığında mouseout olayını tetikler. Bir seçenek, #video ve #wrap öğelerinin yukarısında üçüncü bir see-through div kullanmak ve bu olayları tetiklemek için kullanmaktır:

<div id="wrap">
    <div id="text">text</div>
    <div id="video">video</div>
    <div id="cursor"></div>
</div>

$(document).ready(function(){
  $("#cursor").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#cursor").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });

Here's the updated working code: http://jsfiddle.net/tf4qhoxs/

0
katma

#Video div'iniz #wrap div'i kapladığında mouseout olayını tetikler. Bir seçenek, #video ve #wrap öğelerinin yukarısında üçüncü bir see-through div kullanmak ve bu olayları tetiklemek için kullanmaktır:

<div id="wrap">
    <div id="text">text</div>
    <div id="video">video</div>
    <div id="cursor"></div>
</div>

$(document).ready(function(){
  $("#cursor").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#cursor").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });

Here's the updated working code: http://jsfiddle.net/tf4qhoxs/

0
katma