（Jquery）希望徽标在悬停时滑出

Question

所以我想要这个

然后徽标右侧出现动画，导航栏也会移动。

我在考虑使用JQuery，但我对JQuery了解不多。有什么建议？ ：）

这是导航的代码。 （我正在使用论坛软件xenforo）

<xen:edithint template="navigation.css" />

<div class="navWrapper">
<div id="navigation" class="pageWidth {xen:if $canSearch, withSearch}">
<div class="pageContent">
    <nav>

<div class="navTabs">
<ul class="publicTabs">
    <li class="navTab">
        <div id="logo">
            <a href="{$logoLink}">
                <span><xen:comment>This span fixes IE vertical     positioning</xen:comment></span>
                <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
            </a>
        </div>
    </li>
    <!-- home -->
    <xen:if is="{$showHomeLink}">
        <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
    </xen:if>


    <!-- extra tabs: home -->
    <xen:if is="{$extraTabs.home}">
    <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
        <xen:if is="{$extraTab.linksTemplate}">
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">

            <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>

            <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">

                {xen:raw $extraTab.linksTemplate}
            </div>
        </li>
        <xen:else />
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
            </li>
        </xen:if>
    </xen:foreach>
    </xen:if>


    <!-- forums -->
    <xen:if is="{$tabs.forums}">
        <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">

            <a href="{$tabs.forums.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.forums.title}</a>

            <div class="{xen:if {$tabs.forums.selected}, 'selectedMenu'} Menu JsOnly tabMenu">

                <ul class="secondaryContent blockLinksList">
                <xen:hook name="navigation_tabs_forums">
                    <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                    <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                    <xen:if is="{$visitor.user_id}">
                        <li><a href="{xen:link 'watched/forums'}">{xen:phrase watched_forums}</a></li>
                        <li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>
                    </xen:if>
                    <li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
                </xen:hook>
                </ul>
            </div>
        </li>
    </xen:if>


    <!-- extra tabs: middle -->
    <xen:if is="{$extraTabs.middle}">
    <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
        <xen:if is="{$extraTab.linksTemplate}">
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected'} Popup PopupControl PopupClosed">

            <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>

            <div class="{xen:if {$extraTab.selected}, 'selectedMenu'} Menu JsOnly tabMenu">

                {xen:raw $extraTab.linksTemplate}
            </div>
        </li>
        <xen:else />
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
            </li>
        </xen:if>
    </xen:foreach>
    </xen:if>


    <!-- members -->
    <xen:if is="{$tabs.members}">
        <li class="navTab members {xen:if $tabs.members.selected, 'selected'} Popup PopupControl PopupClosed">

            <a href="{$tabs.members.href}" class="navLink NoPopupGadget" rel="Menu">{$tabs.members.title}</a>


            <div class="{xen:if {$tabs.members.selected}, 'selectedMenu'} Menu JsOnly tabMenu">

                <ul class="secondaryContent blockLinksList">
                <xen:hook name="navigation_tabs_members">
                    <li><a href="{xen:link members}">{xen:phrase notable_members}</a></li>
                    <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if>
                    <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                </xen:hook>
                </ul>
            </div>
        </li>
    </xen:if>                   

    <!-- extra tabs: end -->
    <xen:if is="{$extraTabs.end}">
    <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
        <xen:if is="{$extraTab.linksTemplate}">
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected'} Popup PopupControl PopupClosed">


            <a href="{$extraTab.href}" class="navLink NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>

            <div class="{xen:if {$extraTab.selected}, 'selectedMenu'} Menu JsOnly tabMenu">

                {xen:raw $extraTab.linksTemplate}
            </div>
        </li>
        <xen:else />
            <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
            </li>
        </xen:if>
    </xen:foreach>
    </xen:if>

    <!-- responsive popup -->
    <li class="navTab navigationHiddenTabs Popup PopupControl PopupClosed" style="display: none;">  

        <a rel="Menu" class="navLink NoPopupGadget"><span class="menuIcon">{xen:phrase menu}</span></a>

        <div class="Menu JsOnly blockLinksList primaryContent"></div>
    </li>


    <!-- no selection -->
    <xen:if is="!{$selectedTab}">
        <li class="navTab selected"><div class="tabLinks"></div></li>
    </xen:if>
</ul>

  <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" />     </xen:if>

    </nav>  
</div>

   

由于某种原因，最后两个元素不会在所有代码中显示...

Answer 1

以下是一个简单示例：http://jsfiddle.net/vUd5z/

$('#logo').hide();
$('#nav').hover(
    function() {
        $('#logo').show(1500);
    }, function() {
        $('#logo').hide(1500);
    }
);

#logo是您要展示的图片＆amp; hide和#nav是触发动画的区域。