0

私が使用しているjQueryは次のとおりです。

jQuery(document).ready(function () {
    jQuery(".controller a").click(function () {
        jQuery(this).parents('.slider').toggleClass('sliderclick');
        jQuery(this).parents('.slider').animate({left:'0px'},1000);
        jQuery(this).parents('.sliderclick').animate({left:'-200px'},1000);
        return false;
    });
});

デモ

jsfiddleでは完全に機能しますが、ローカルホストで試してみると、最初にクリックしたときに最初に切り替わり、その後完全に機能します。toggle() 関数を使用すると、a をトグルすると驚くほど非表示になります。どのようにできるのか？

4

2 に答える 2

1

あなたは行くことができます：
あなたの要素の現在の位置をチェックし、それをboolean（）に変えてください!parseInt($par.css('left'), 10)。それよりも、単純な三項演算子を使用して、それぞれ左0 または-200px に移動します。

http://jsfiddle.net/p9jTf/3/

jQuery(function( $ ) {
    $(".controller").click(function ( e ) {
        e.preventDefault();
        var $par = $(this).closest('.slider');        
        $par.animate({left : !parseInt($par.css('left'), 10) ? -200 : 0},1000);
    });
});

クラスを使用して開いている要素を非表示にする例を次に示します。

http://jsfiddle.net/p9jTf/6/

jQuery(function( $ ) {
    $(".controller").click(function (e) {
        e.preventDefault();
        var $par = $(this).closest('.slider');
        $('.opened').stop().animate({left:-200},1000).removeClass('opened');
        $par.toggleClass('opened').animate({
            left: !parseInt($par.css('left'), 10) ? -200 : 0
        }, 1000);
    });
});
于 2013-07-28T11:11:23.770 に答える
0

私はローカルでこれを試してみましたが、まったく問題なく動作しています。確認してください：

<style type="text/css">
#slider {
    position: fixed;
    top: 0%;
    left:0;
    overflow: hidden;
}
#slider .moduletable {
    margin-bottom: 7px;
}
#slider .moduletable:last-child {
    margin-bottom: 0;
}
.button-wrap > div {
    display: table-cell;
}
.controller {
    width: 55px;
    height: 216px;
    background: #000;
    border-radius: 0 19px 19px 0;
    text-align: center;
    vertical-align: middle;
}
.controller div {
    transform: rotate(90deg);
    white-space: nowrap;
    width: 55px;
    margin-top: -30px;
}
.controller a {
    font-size: 20px;
    line-height: 0;
}
.controller a:hover, .controller a:active, .controller a:visited, .controller a:link {
    text-decoration: none;
}
.content-wrap {
    width: 200px;
    height: 216px;
    background: #403728;
}
.slider {
    position: relative;
    left: -200px;
}
</style>

<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<!-- Applying Custom JS Functions -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $(".controller a").click(function () {
        $(this).parents('.slider').toggleClass('sliderclick');
        $(this).parents('.slider').animate({
            left: '0px'
        }, 1000);
        $(this).parents('.sliderclick').animate({
            left: '-200px'
        }, 1000);
        return false;
    });
});
</script>

<!-- Your HTML -->
<div id="slider">
    <div class="moduletable">
        <div class="slider sliderclick" style="left: -200px;">
            <div class="button-wrap">
                <div class="content-wrap" id="button-1">Booking Contents</div>
                <div class="controller">
                    <div><a href="#buttton-1">Booking</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="moduletable">
        <div class="slider sliderclick" style="left: -200px;">
            <div class="button-wrap">
                <div class="content-wrap" id="button-1">Special Offer Content</div>
                <div class="controller">
                    <div><a href="#buttton-1">Special Offer</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
于 2013-07-28T09:53:46.580 に答える