如何将div滑出屏幕并将样式更改为display:none

时间:2018-03-03 22:18:06

标签: jquery

我一直试图这样做一周......尝试了一切,只是想不出来...... 我不知道该怎么做了。有人可以解释或告诉我如何做到这一点?在此先感谢...非常感谢

查询:

$(document).ready(function(){
        $('#hide-modcraft').click(function(){
            var hidden = $('#modcraft');
            if (hidden.hasClass('visible')){
                hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
            } else {
                hidden.animate({"left":"0px"}, "slow").addClass('visible');
            }
        });
    });

HTML:

<section id="modcraft">
        <div id="prod">
            <table>
                <tr>
                    <td>
                        <div class="prod-img modcraft"></div>
                    </td>
                    <td>
                        <div class="prod-disc">
                            <header>
                                <h1>Modcraft<br/><i>for ps3</i></h1>
                            </header>
                            <footer>Lorem ipsum dolor sit amet</footer>
                        </div>
                    </td>
                    <td>
                        <div class="prod-more">
                            <a href="#" id="hide-modcraft"><button>More info</button></a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </section>

的CSS:

#modcraft{
position: absolute;
padding: 64px 30px 30px 30px;
background-color: #444;}

1 个答案:

答案 0 :(得分:0)

我完全清楚你要从你的问题中做什么,但是如果你改变你的点击功能以包括[ [10;2;10]; [10;50;10]; [10;1;10] ] | | | second second second <--- mapping function | | | V V V [ 2 ; 50 ; 1 ] 它似乎按你的意图工作,就像这样:

event.preventDefault();

然后,面板在第一次单击时向左移动,然后在第二次单击时从视图向左滑动。如果那是你的意图,那么我希望这能减轻你的痛苦。