Това, което искам да направя, е изображението да се движи точно когатомишката се задържа над нея и се връща в същото положение, когато мишката бъде свалена от изображението. Но това, което прави, е, че изображението отива вляво и изчезва, когато мишката се наведе над него. Моля, кажете ми каква е моята грешка.
<html>
<head>
<style>
img { position: relative;
}
</style>
<script src="/images/http://code.jquery.com/jquery-1.10.2.min.js" type = "text/javascript"></script>
<script type = "text/javascript">
$("#box img").hover(
function () {
$(this).animate({
right: "2px"
});
},
function () {
$(this).animate({
left: "2px"
});
}
);
</script>
</head>
<body>
<div id = "box">
<img src="/images/pathtimage/1.jpg" hspace="30" height="350" width="220" >
</div>
</body>
</html>
Отговори:
4 за отговор № 1JQuery "S animate() анимира CSS свойства, така че вероятно трябва да се придържате към анимиране на същото свойство като left и right са две различни CSS свойства
$(function() {
$("#box img").hover(function () {
$(this).animate({
left: "2px"
}, 600);
}, function () {
$(this).animate({
left: "0px"
}, 600);
});
});
Също така имайте предвид, че в някои случаи трябва да зададете начална стойност в CSS, тъй като jQuery не може да изчисли стойности по подразбиране като inherit или auto, а тази настройка на лявата и горната стойност не работи без позиция
#box img {position: relative; left: 0}
1 за отговор № 2
Кодът трябва да бъде обвит в $ (document) .ready (). Той се изпълнява преди елементите да бъдат заредени в DOM. $(document).ready(function(){}) казва на jQuery да изчака, докато DOM се зареди, преди да изпълни вашия скрипт.
$(document).ready(function(){
$("#box img").hover(
function () {
$(this).animate({
right: "2px"
});
},
function () {
$(this).animate({
left: "2px"
});
}
);
});