(Jquery) Хотите логотип выскользнуть по наведению

Question

Так что я хотел бы, чтобы это

Тогда логотип выходит справа с анимацией и navtabs двигаться, а также.

Я думал об использовании 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 это изображение, которое вы хотите показать & скрыть и #nav это область, которая запускает анимацию.