How to write a jQuery animate in this situation?

JavaScript
1

I need a jqeury animate effection. when I click img1.jpg, img2.jpg will animate right 200px, but I have too many divs and other html elements, I tried many times, it also failed. How to write correctly? Thanks. PS: h1, the font is on the top of image, and b class=“effect” is some fadein effect, it should be the toppest of the all.

<script type="text/javascript">  
jQuery(".font1").click(function(){ 
  jQuery(".div21").animate({"right": "+=200px"}, "slow"); 
}); 
</script> 
<a href="#" class="click"> 
<div class="div11" style="float:left;"> 
<h1 class="font1" style="z-index:5;">text1</h1> 
<div class="div12"> 
<div class="div13">  
<img src="img1.jpg"> 
<b class="effect" style="z-index:10;"></b> 
</div> 
</div> 
</div> 
</a> 
<a href="#" class="click"> 
<div class="div21" style="float:right;"> 
<h1 class="font2" style="z-index:5;">text2</h1> 
<div class="div22"> 
<div class="div23"> 
<img src="img2.jpg"> 
<b class="effect" style="z-index:10;"></b> 
</div> 
</div> 
</div>
2

The first problem, is that anchors can not contain block-level elements.

3

Yes, I just want to get this effect, the anchor can change to other element id or class.

4

Before javascript code is likely to work (this includes jQuery code too), your HTML code needs to be valid.

When there are errors in the HTML code, those are most likely to cause problem with the javascript code.

Knowing this, the HTML problems need to be fixed first, before any progress can be reasonably made on the javascript code.

The place that helps you find and fix problems with the HTML code is http://validator.w3.org/

If you are willing to follow our advice, we can help.

If not though - if you just want a script that does what you need with your existing HTML code, that’s not going to happen.

the Fix the HTML code, and we can then move on to making it behave as you want.

5

Try once with marginRight instead of right.
In some of my own code I use marginRight and it works, could be only that.


  jQuery(".font1").click(function(){ 
  jQuery(".div21").animate({
  "marginRight": "+=200px"}, "slow"); 
  });
6 
<script type="text/javascript">
    $(function () {
        jQuery(".font1").click(function () {
            jQuery(".click:eq(1)").animate({ "marginLeft": "200px" }, "slow");
        });
    });
</script>
<style>
    .click{float:left }
</style>
<div  class="click">
    <div class="div11">
        <h1 class="font1" style="z-index: 5;">
            text1</h1>
        <div class="div12">
            <div class="div13">
                <img src="img1.jpg" />
                <b class="effect" style="z-index: 10;"></b>
            </div>
        </div>
    </div>
</div>
<div  class="click"> 
    <div class="div21">
        <h1 class="font2" style="z-index: 5;">
            text2</h1>
        <div class="div22">
            <div class="div23">
                <img src="img2.jpg" />
                <b class="effect" style="z-index: 10;"></b>
            </div>
        </div>
    </div>
</div>

Like this?

7

Like Yi.Sage says, with marginLeft…:blush: (I was wrong with marginRight, too distracted lately)

8

Thanks all. I also have a question: if there still has a div31 after div21(at the right part), the div21 can not move more?


<script type="text/javascript">
    $(function () {
        jQuery(".font1").click(function () {
            jQuery(".click:eq(1)").animate({ "marginLeft": "200px" }, "slow");
        });
    });
</script>
<style>
    .click{float:left }
</style>
<div  class="click">
    <div class="div11">
        <h1 class="font1" style="z-index: 5;">
            text1</h1>
        <div class="div12">
            <div class="div13">
                <img src="img1.jpg" />
                <b class="effect" style="z-index: 10;"></b>
            </div>
        </div>
    </div>
</div>
<div  class="click"> 
    <div class="div21">
        <h1 class="font2" style="z-index: 5;">
            text2</h1>
        <div class="div22">
            <div class="div23">
                <img src="img2.jpg" />
                <b class="effect" style="z-index: 10;"></b>
            </div>
        </div>
    </div>
</div>
<div  class="click"> 
    <div class="div31">
        <h1 class="font3" style="z-index: 5;">
            text3</h1>
        <div class="div32">
            <div class="div33">
                <img src="img3.jpg" />
                <b class="effect" style="z-index: 10;"></b>
            </div>
        </div>
    </div>
</div>