मैं जो करना चाहता हूं वह सही समय पर स्थानांतरित करने के लिए छवि हैमाउस इसके ऊपर मंडराता है और वापस उसी स्थिति में आ जाता है जब माउस छवि से हट जाता है। लेकिन यह क्या कर रहा है छवि बाईं ओर जाती है और जब माउस उस पर मंडराता है तो गायब हो जाता है। कृपया बताएं कि मेरी क्या गलती है।
<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>
उत्तर:
उत्तर № 1 के लिए 4jQuery "रों animate() CSS गुणों को एनिमेट करता है, इसलिए आपको संभवतः उसी प्रॉपर्टी को एनिमेट करने के साथ चिपका देना चाहिए, जैसा कि left तथा right दो अलग सीएसएस गुण हैं
$(function() {
$("#box img").hover(function () {
$(this).animate({
left: "2px"
}, 600);
}, function () {
$(this).animate({
left: "0px"
}, 600);
});
});
यह भी ध्यान दें कि कुछ मामलों में आपको सीएसएस में एक जन्मजात मूल्य निर्धारित करना होगा, क्योंकि jQuery डिफ़ॉल्ट मानों की गणना नहीं कर सकता है inherit या auto, और उस सेटिंग को छोड़ दिया और शीर्ष मान किसी स्थिति के बिना काम नहीं करता है
#box img {position: relative; left: 0}
उत्तर № 2 के लिए 1
कोड को $ (दस्तावेज़) में लपेटा जाना चाहिए। पहले से ही ()। डोम पर तत्वों को लोड करने से पहले इसे निष्पादित किया जा रहा है। $(document).ready(function(){}) आपकी स्क्रिप्ट निष्पादित करने से पहले डोम लोड होने तक प्रतीक्षा करने के लिए jQuery बताता है।
$(document).ready(function(){
$("#box img").hover(
function () {
$(this).animate({
right: "2px"
});
},
function () {
$(this).animate({
left: "2px"
});
}
);
});