Question

我想让一个Div在页面上随机移动，然后跳到＆＃34;跳过＆＃34;鼠标悬停。我想结合.ready和.hover。不幸的是，＆＃34;四处走动＆＃34;动画效果很好，但.onhover只能在准备好的动画开始后才能正常工作，并且它不会同时发生。

如何在悬停时获取动画元素并同时在dom中移动？（没有延误）。这是我的代码：

    $("document").ready(function() { 

       animateDiv($('.ciao'));

   $(".myDiv").click(function() {
    $(this).animate({left: "+=100px"});
   });

});

animateDiv函数：

    function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}

Answer 1

这是一个工作示例，向您展示它是否有效。

＆＃13;

(function ($) {
$("document").ready(function() { 

   animateDiv($('.ciao'));

   $(".myDiv").click(function() {
    $(this).animate({marginLeft: "+=100px"});
   });

});
$(".ciao").hover(function() {
	$(this).animate({paddingLeft: "+=10px"}, { duration: 200, queue: false });
});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, { duration: speed, queue: false, complete: function() {
        animateDiv($target);
    }});

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}
})(jQuery)

＆＃13;

.ciao {
  position: absolute;
  background-color: red;
}

.myDiv {
  background-color: yellow;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

</div>

<div class="ciao">Hello <div class="myDiv">Click on me</div></div>

＆＃13;

您需要关闭动画队列。文档：http://api.jquery.com/animate/

在Jquery中同时悬停和就绪事件

1 个答案: