[英]Move element in div to the left
I have an element on a mouse over event that I would like to be animate and move to the left. 我在鼠标悬停事件上有一个元素,希望对其进行动画处理并向左移动。 I have what I thought was the correct code in a fidle but it seems just mot to work. 我以为是正确的代码,但这似乎只是行之有效。
here is the fiddle I created: 这是我创建的小提琴:
https://jsfiddle.net/feb8rdwp/3/ https://jsfiddle.net/feb8rdwp/3/
here is the code I used - simple but based on this it really should work: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1 这是我使用的代码-很简单,但是基于此,它确实应该可以工作: http : //www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1
$(".Submit a").mouseover(function(){ $(".fadeInLeftBig").animate({left: '750px'}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="animation fadeInLeftBig animated"><img alt="" src="http://younggraphics.com.au/Portals/0/images/skin/car.png" /></div> <div class="Submit"><a id="dnn_ctr461_FormsView_lnkSubmitEmail" class="Button_default" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("dnn$ctr461$FormsView$lnkSubmitEmail", "", true, "", "", false, true))'>Submit</a></div>
To apply left
property, make the element position relative/absolute to the parent, 要应用left
属性,请使元素位置相对于父元素相对/绝对,
.animation{
position:relative;
}
Or use marginLeft
或使用marginLeft
$(".Submit a").mouseover(function(){
$(".fadeInLeftBig").animate({marginLeft: '750px'});
});
First you have to add jQuery as a library to your fiddle and second if you want to use left then you need to set the element to absolute position, which means parent requires relative position 首先,您必须将jQuery作为库添加到小提琴中,其次,如果要使用left,则需要将元素设置为绝对位置,这意味着父级需要相对位置
<div style="position: relative;">
<div style="position:absolute;">This div can use the left css</div>
</div>
https://jsfiddle.net/feb8rdwp/5/ https://jsfiddle.net/feb8rdwp/5/
may be you should try like this: 也许您应该尝试这样:
$('.block').mouseover(function() {
$(this).animate({"left": "+=700px"},"slow");
});
you can try here - https://jsfiddle.net/dimitrioglo/ebkc9dzL/25/ 您可以在这里尝试-https: //jsfiddle.net/dimitrioglo/ebkc9dzL/25/
The working example: 工作示例:
<div class="Submit"><a id="dnn_ctr461_FormsView_lnkSubmitEmail" class="Button_default" href='#'>Submit</a></div>
JavaScript: JavaScript的:
$(document).ready(function(ee){
$(".Button_default").click(function(){
$(".fadeInLeftBig").animate({left: '750px'});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.