简体   繁体   中英

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/

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

 $(".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,

.animation{
    position:relative;
}

Or use 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

<div style="position: relative;">
    <div style="position:absolute;">This div can use the left css</div>
</div>

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/

The working example:

 <div class="Submit"><a id="dnn_ctr461_FormsView_lnkSubmitEmail" class="Button_default" href='#'>Submit</a></div>

JavaScript:

 $(document).ready(function(ee){    
     $(".Button_default").click(function(){      
        $(".fadeInLeftBig").animate({left: '750px'});
    });  
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM