0

ページをクリックするだけでスライドして開閉する小さなリボンを作成しました。XP ProのIE7でリボンアニメーションを表示すると、関数の「非表示」部分が終了するまで、すべてがうまく機能します。

関数の「非表示」部分は、非表示にする要素を上にスライドさせ、非表示が完了すると、要素がページ上で点滅してから再び消えます。

次のコードに、私が気付いていないこの動作を引き起こす何かがありますか？

また、ここにフィドルがあります（他のすべてのブラウザーで正常に機能します）...スライダーリボンjsfiddle

これが私のスクリプトです：

$(document).ready(function(){
    $('.extender').animate({
            height: 'hide'
        }, 20);
    $('.special_offers_ribbon_showmore').hover(
    function(){
        $(this).css('cursor', 'pointer');
    },
    function(){
        $(this).css('cursor', 'auto');
    });
    $('.special_offers_ribbon_showmore').click(function(){
        if ($('.extender').hasClass('extended')) {
            $('.extender').animate({
            height: 'hide'
        }, 500, function(){
            $('.extender').removeClass('extended');
            $('.hidedetails').hide();
            $('.showdetails').show();
        });
        } else {
        $('.extender').animate({
            height: 'show'
        }, 200, function(){
            $('.extender').addClass('extended');
            $('.hidedetails').show();
            $('.showdetails').hide();

        });
        }
    });
});

編集コメントによると、私はとを使ってみslideUp()ましslideDown()たが、関数の最後でまだちらつきがありslideUp()ます。これがそのスクリプトです（私はもっと好きです-よりきれいに見えます...）：

$('.special_offers_ribbon_showmore').hover(

function() {
    $(this).css('cursor', 'pointer');
}, function() {
    $(this).css('cursor', 'auto');
});
$('.special_offers_ribbon_showmore').click(function() {
    if ($('.extender').is(':hidden')) {
        $('.extender').slideDown(
            'slow', 
            function() {
            $('.hidedetails').show();
            $('.showdetails').hide();
        });
    } else {
        $('.extender').slideUp(
            'slow',
            function() {
            $('.hidedetails').hide();
            $('.showdetails').show();

        });
    }
});​

HTML：

<div id="special_offers_ribbon">
<div id="special_offers_ribbon_detail" class="extender">
<img src="../images/ribbon_top.png">
<h1>Book a new meeting for 2012 and save!</h1>
<p>Free meeting space</p>
<p>No set-up fee</p>
<p>Free A/V Packages</p>
<p>&hellip; and much more!</p>
<a href="../events/index.cfm" title="See a full list of the 2012 Meetings and Events special offers here."><img src="../images/learn_more.png"></a>
                                            </div>
 <div id="special_offers_ribbon_opener">
 <img src="../images/ribbon_top.png">
 <h1 class="opener_headline">2012</h1>
 <p class="opener_text">Meetings &amp; Events<br />Special Offers<br /><span class="showdetails special_offers_ribbon_showmore"><img src="../images/showdetails.png" title="Show Details"></span><span class="hidedetails special_offers_ribbon_showmore"><img src="../images/hidedetails.png" title="Hide Details"></span></p>
 </div>
 </div>

そして、CSS：

p.ribbon_room {
    padding:0 210px 0 0;
}
#special_offers_ribbon {
    width:267px;
    float:right;
    padding:0px 0px 110px 0px;
    margin:0px 0px;
    background:transparent url(../images/ribbon.png) bottom center no-repeat;
    text-align:center;
}
#special_offers_ribbon h1 {
    margin:1px 50px 0 50px;
    padding:10px 0 0 0;
    border-top:1px dotted #eee7c6;
    color:#eee7c6;
}
#special_offers_ribbon p {
    margin:0 50px 0 50px;
    padding:0;
    color:#eee7c6;
}
#special_offers_ribbon p span.hidedetails {
    display:none;
}
#special_offers_ribbon div#special_offers_ribbon_detail a img{
    border:none;
}
4

1 に答える 1

0

私はあなたの問題を次のように回避しました：

  • #special_offers_ribbon要素のpositionとrelativeを設定topする-210px
  • topプロパティの代わりにアニメーション化しheightます。

きれいではありませんが、要素が適用されたコンテナ内のビューポートの上部にある限り、機能しますoverflow:hidden。

ここで働くフィドル

于 2012-06-14T15:18:54.170 に答える