ホバーはdiv要素を超える画像は、画像が徐々に消えさせる

-1

私はjqueryの中で特定のdivの上にそれを保持するときますます小さく取得し、5秒後に消えてWebページに画像を取得しようとしていますホバーはdiv要素を超える画像は、画像が徐々に消えさせる

2017-06-22 bram poel

あなたがこれまでに試してみましたでしょうか？ –

私はこのページを作って、私のdivを私のdivに移動することができますhttp://78696.ict-lab.nl/InhaalJquery/Opdracht2/Opdracht2.htmlこの例では、動物がケージの上にあるときだけ、サイズが小さくなり、消える –

'jquery'というタグが付いていることは知っていますが、CSSを使うことはできますか？ [：hover]（https://developer.mozilla.org/en-US/docs/Web/CSS/:hover）と[transitions]（https://developer.mozilla.org/en-US/docs）を確認してください。/Web/CSS/CSS_Transitions/Using_CSS_transitions）をCSSに適用します。 –

へ1つのdivから別のdivに衝突を検出すると、jsからoffset（）を使用して画像を消す必要があります.css3 animationを使用できます。

私はあなたが私のローカルマシン上で完璧に作業している。このために探していると信じて：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery Opdracht2</title> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

    <style> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    #cage { padding: 0.5em; width: 42px; height: 42px; } 

    #resize { 
    width: 0px; 
    -moz-animation: scale 0.5s; /* Firefox */ 
    -webkit-animation: scale 0.5s; /* Safari and Chrome */ 
    -o-animation: scale 0.5s; /* Opera */ 
    animation: scale 5s; 
} 
    @keyframes scale { 
     from { 
      width:150px; 
     } 
     to { 
      width:55px; 
     } 
    } 
    @-moz-keyframes scale { /* Firefox */ 
     from { 
      width:150px; 
     } 
     to { 
      width:55px; 
     } 
    } 
    @-webkit-keyframes scale { /* Safari and Chrome */ 
     from { 
      width:150px; 
     } 
     to { 
      width:55px; 
     } 
    } 
    @-o-keyframes scale { /* Opera */ 
     from { 
      width:150px; 
     } 
     to { 
      width:55px; 
     } 
    } 


    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    }); 

    function collision($img, $cage) { 
    var img_left = $img.offset().left; 
    var img_top= $img.offset().top; 
    var img_height = $img.outerHeight(); 
    var img_width = $img.outerWidth(); 
    var img_l_w = img_left + img_width; 
    var img_t_h = img_height + img_top; 

    var cage_left = $cage.offset().left; 
    var cage_top= $cage.offset().top; 
    var cage_height = $cage.outerHeight(); 
    var cage_width = $cage.outerWidth(); 
    var cage_l_w = cage_left + cage_width; 
    var cage_t_h = cage_height + cage_top; 

    if(img_t_h < cage_top || img_l_w < cage_left || img_top > cage_t_h || img_left > cage_l_w) return false; 
    return true;  


    } 


window.setInterval(function() { 
    var colli = collision($('.growimage'), $('.cage')); 
    if(colli){ 
     clearInterval(1); 
     $(".growimage img").attr('id','resize'); 
    } 
    console.log(colli); 

}, 100); 
    </script> 
</head> 
<body> 

<div id="draggable" class="growimage"> 
    <img src="duck.png" alt="Duck" height="150px" width="150px"> 
</div> 
<br> 
<div id="cage" class ="cage"> 
    <img src="kooi.png" alt="kooi" height="42px" width="42px"> 
</div> 


</body> 
</html>

出典

2017-06-24 04:16:20

ホバーはdiv要素を超える画像は、画像が徐々に消えさせる

答えて

関連する問題