Question

我有一个div，当点击时，会导致我的标题图像缩小并调整标题大小。 html如下：

<div id="topmenu" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
            </a>

                            <a class="brand logo" href="http://www.test.com/testsite/">
                                <div id="imgsize">
                    <img src="http://www.test.com/testsite/Logo-1024x335.png" alt="Logo" />
                </div>
                            </a>

            <div id="searchicons">
                <form class="navbar-search pull-right" method="get" id="searchform" action="http://www.test.com/testsite/">
                    <input type="text" class="search-query" placeholder="Search" name="s" id="s" value="">
                </form>

                <a href="http://www.test.com/testsite/feed/" title="Subscribe to our RSS Feed" class="topmenu-social pull-right"><i class="icon-rss icon-large"></i></a>

                                    <a href="http://twitter.com/#" title="Follow us on Twitter" class="topmenu-social pull-right"><i class="icon-twitter icon-large"></i></a>

                                    <a href="http://facebook.com/#" title="Find us on Facebook" class="topmenu-social pull-right"><i class="icon-facebook icon-large"></i></a>
                                </div>
        </div>
            <nav id="nav-main" class="nav-collapse" role="navigation">
                <ul id="menu-top" class="nav"><li class="menu-about"><a href="http://www.test.com/testsite/about/">About</a></li></ul>                  
            </nav>
        <div id="toggler" class="shrink visible-desktop"><a href="#"><span id="toggler_span"><i class="icon-chevron-up"></i><br>Hide</span></a></div>
    </div>
</div>

这是我的jQuery：

<script>
$(document).ready(function() {
$('#toggler').toggle(function () {
    $('#imgsize').css('max-width','230px');
    $('#toggler_span').replaceWith('<div id="toggler_span">Show<br><i class="icon-chevron-down"></i></span>');
}, function () {
    $('#imgsize').css('max-width','1024px');
    $('#toggler_span').replaceWith('<div id="toggler_span"><i class="icon-chevron-up"></i><br>Hide</span>');
});
});
</script>

好的新功能是代码的工作原理。但是我想在它上面添加一个小比萨饼，并使其为图像/标题的大小调整设置动画。

标题的高度由图像的高度决定，该高度根据图像的宽度设置为自动，该宽度是用jquery改变的，以创建图像的大小。

我知道slideToggle但是当我将它应用到我的代码时它不会做任何事情。

我可以使用另一种方法吗？

Answer 1

而不是css方法，请尝试animate：

$(document).ready(function() { 
    $('#toggler').toggle(function () { 
        $('#imgsize').animate({'max-width': '230px'}, 1000);

        $('#toggler_span').replaceWith('<div id="toggler_span">Show<br><i class="icon-chevron-down"></i></span>'); }, function () { $('#imgsize').animate({'max-width': '1024px'}, 1000);

        $('#toggler_span').replaceWith('<div id="toggler_span"><i class="icon-chevron-up"></i><br>Hide</span>'); 
    }); 
});

jQuery用slideToggle切换？

1 个答案: