我可以使用切换来水平显示图像

时间:2012-10-01 15:13:53

标签: toggleclass jquery

我正在使用按钮将图像状态从“隐藏”切换为“显示”。我可以显示图像,但是当它们显示时,它们会以垂直对齐方式显示。我希望图像能够水平显示而不是垂直显示。

我的标记如下

<div class="left ch-ad-profile-left eleven columns">
    <button>
        <div class="boxes-212x100">
            <h4 class="blue">Parked Ads</h4>
            <div class="status-l">
                <p>Updates</p>
                <center><span>18</span></center>
            </div>
            <div class="status-r">
                <p>Removed</p>
                <center><span>3</span></center>
            </div>
            <div class="clearfix"></div>
        </div>
    </button>
    <script>
        $("button").click(function () {
            $(".boxes-112x100-1").slideToggle("slow");
        });
    </script>

    <!--end class=boxes-212x100-->
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="boxes-112x100-1" style="display:none;">
        <img src="../../../images/placeholder-small.png" class="" alt="">
    </div>
    <div class="clearfix"></div>
</div>  

那么如何判断切换以使图像显示在水平线而不是垂直线上?

2 个答案:

答案 0 :(得分:0)

您可以使用jQueryUI。

http://docs.jquery.com/UI/Effects/Slide

答案 1 :(得分:0)

我担心你没有任何内置的方法..你需要使用animate函数,或者你需要扩展jQuery方法来获得该功能..

您可以使用jQueryUi或Cycle Plugin来实现此目标

另外看看这个

jQuery slide left and show