Jquery 将图片悬停在div上，使图片慢慢消失
我试图让网页中的图片变得越来越小，并在5秒钟后消失，当我在jquery中的特定div上按住它时要检测从一个div到另一个div的冲突，需要使用js中的offset（），要消失图像，可以使用css3动画 我相信您正在寻找在我的本地机器上运行良好的：Jquery 将图片悬停在div上，使图片慢慢消失,jquery,Jquery,我试图让网页中的图片变得越来越小，并在5秒钟后消失，当我在jquery中的特定div上按住它时要检测从一个div到另一个div的冲突，需要使用js中的offset（），要消失图像，可以使用css3动画 我相信您正在寻找在我的本地机器上运行良好的： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="w
<!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>
jQuery Opdracht2
#可拖动{宽度：150px；高度：150px；填充：0.5em；}
#笼{填充：0.5em；宽度：42px；高度：42px；}
#调整大小{
宽度：0px；
-moz动画：缩放0.5s；/*Firefox*/
-webkit动画：缩放0.5s；/*Safari和Chrome*/
-o型动画：缩放0.5s；/*Opera*/
动画：缩放5s；
}
@关键帧比例{
从{
宽度：150px；
}
到{
宽度：55px；
}
}
@-moz关键帧缩放{/*Firefox*/
从{
宽度：150px；
}
到{
宽度：55px；
}
}
@-webkit关键帧缩放{/*Safari和Chrome*/
从{
宽度：150px；
}
到{
宽度：55px；
}
}
@-o-关键帧缩放{/*Opera*/
从{
宽度：150px；
}
到{
宽度：55px；
}
}
$（函数（）{
$（“#可拖动”）.draggable（）；
} );
函数冲突（$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_左+img_宽；
var img_t_h=img_高度+img_顶部；
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_左侧+cage_宽度；
var cage_t_h=cage_高度+cage_顶部；
如果（img_t_hcage_h | img_left>cage_l_w）返回false；
返回true；
}
setInterval（函数（）{
var colli=冲突（$（'.growimage'），$（'.cage'）；
如果（科利）{
净距（1）；
$（“.growimage img”）.attr（'id'，'resize'）；
}
控制台日志（colli）；
}, 100);
jquery