1

I am using a "fly across" effect on my site. Like this - The Horizontal Effect.

The script works a treat in IE8,9, FF and Chrome. When in IE7 I have more than one element on a page. Both have the same id. Hovering over the first item on the page, It loads. Hovering over the other and it doesnt work at all. Doesnt quite make sense to me.

My code is as follows :

HTML

<div style="margin-bottom:30px;" id="takealook-sub">
            <a href="#">
                <img style="left: -200px;" alt="" src="path/to/image">
            </a>
</div>

jQuery

$(function(){
        $("#takealook-sub a").hover(function(){
            $("img", this).stop().animate({left:"0px"},{queue:false,duration:600});
        }, function() {
            $("img", this).stop().animate({left:"-200px"},{queue:false,duration:600});
        });
    });

Does anyone know of a reason why one would work in IE7, But not the other? Like I say all seems fine in all other browsers.

Thanks

4

1 に答える 1

4

1 つのドキュメントで sを重複させることはできません....代わりに a を使用してください ... v4.0.1 HTML 仕様はこちら、v5 HTML 仕様はこちらをご覧くださいidclass

クラスの使用例:

<div style="margin-bottom:30px;" class="takealook-sub">
    <a href="#">
        <img style="left: -200px;" alt="" src="path/to/image">
    </a>
</div>
<div style="margin-bottom:30px;" class="takealook-sub">
    <a href="#">
        <img style="left: -200px;" alt="" src="path/to/image">
    </a>
</div>

つまり、好きなだけ持つことができます....そして、これを行うことができます：

$(function () {
    $(".takealook-sub a").hover(function () {
        $("img", this).stop().animate({
            left: "0px"
        }, {
            queue: false,
            duration: 600
        });
    }, function () {
        $("img", this).stop().animate({
            left: "-200px"
        }, {
            queue: false,
            duration: 600
        });
    });
});

jQuery セレクターでは、 for s.ではなく、クラスのプレフィックスです。#id

于 2012-04-18T11:28:44.607 に答える