懸停圖片上一個div使畫面慢慢消失

-1

我試圖讓網頁中的圖片變得越來越小，並在5秒後消失，當我在jQuery的拿着它在一個特定的div懸停圖片上一個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）。 –

要碰撞檢測從一個div到另一個你將需要使用偏移量（）從js和消失的圖像，你可以使用css3動畫。

我相信你正在尋找這這是完美的工作我的本地機器上：

<!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使畫面慢慢消失

回答

相關問題