завершение получения hover-on-text-link-to-change-image

Question

Привет, я пытаюсь получить изображение, чтобы оно отображалось поверх другого, когда пользователь наводил на текстовые ссылки, которые я просматривал здесь, и основывал JQuery код, основанный на ней, но нужна помощь в получении его на работу hover on text link to change image

Я пытался заставить его работать здесь, а http://jsfiddle.net/edgardo400/pDTvu/

HTML-

<div id="box1" class="box"> 
    <div style="height: 335px; width: 945px; border: 6px solid #d7c3a5;"> 
     <h1> 
      Cat Poison Control 
     </h1> 
     <ul> 
      <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Black_Cat-icon.png');"> 
       <a class="hoverlink" href="http://www.catster.com/cat-health-care/cat-deshedding-tool" data-img="http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/desheddingtool493x335.jpg"> 
        What Does a De-Shedding Tool Do? 
       </a> 
      </li> 
      <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Himalayan_Cat-icon.png');"> 
       <a href="http://www.catster.com/cat-health-care/cleaning-cat-ears"> 
        Cleaning Cat Ears 
       </a> 
      </li> 
      <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-Orange_Tabby-icon.png');"> 
       <a href="http://www.catster.com/cat-health-care/how-to-give-a-cat-a-bath"> 
        How to Give a Cat a Bath (and Survive!) 
       </a> 
      </li> 
      <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/35px-White_Kitty-icon.png');"> 
       <a href="http://www.catster.com/cat-health-care/clipping-cat-claws"> 
        How to Clip Your Cat's Nails 
       </a> 
      </li> 
      <li style="list-style-position: outside; list-style-image: url('http://images2.wikia.nocookie.net/__cb20100110163009/farmville/images/thumb/b/bb/Black_Cat-icon.png/35px-Black_Cat-icon.png');"> 
       <a href="http://www.catster.com/cat-health-care/cat-grooming-tools"> 
        The Five Essential Cat Grooming Tools 
       </a> 
      </li> 
      <li style="list-style-position: outside; list-style-image: url('http://testdomain.edgardoroldanonline.com/wp-content/uploads/2012/04/40px-Andean_Cat-icon.png');"> 
       <a href="http://www.catster.com/cat-health-care/cat-grooming"> 
        Cat Grooming: A Primer on Keeping Kitty Clean 
       </a> 
      </li> 
     </ul> 
     <div id="catslider"> 

      <img class="alignright size-full wp-image-34" style="position: relative;" title="aspca_poisoncontrol_hotline_feathered" 
      src="http://anime.edgardoroldanonline.com/wp-content/uploads/2012/04/aspca_poisoncontrol_hotline_feathered.png" alt="aspca hotline" 
      width="150" height="150" /> 
     </div> 

    </div> 
    <p> 
     <button class="btn2"> 
      fade out 
     </button> 
    </p> 
</div> 

и JQuery

jQuery(function(){ 
var $catslider=jQuery('#catslider'); //we save the slider 
var $defaultimage=jQuery('img', $catslider); //and the default image 

//mouseenter for the link 
jQuery('#projects .hoverlink').hover(function() { 

     function complete() { 
      jQuery('#slider'); 
     } 
    var filename=jQuery(this).attr('data-img'); //we get the filename from data-img 

    jQuery('<img id="hoverimage" src="'+filename+'" alt="" />') 
    .appendTo($catslider).fadeIn(500); //append and fade in new image (#hoverimage) 

    $defaultimage.fadeOut(500); //fade out default image 
}, 
//mouseleave for the link 
function() { 
    jQuery('#hoverimage').fadeOut(500, function() { //fade out #hoverimage 
    $(this).remove(); //when animation is done, remove it 
    }); 

    $defaultimage.fadeIn(500); //meanwhile fade in original image 
}); 



}); 

Я признателен за любую помощь и все: D

Answer 1

Я не 100% уверен, что вы пытаетесь сделать, но попробовать этот код. Этот пример добавит изображение в первый раз, когда пользователь будет его кэшировать, после этого он будет скрывать изображение после каждого поворота.

Рабочего пример: http://jsfiddle.net/leviputna/cQqGf/2/

<script> 
jQuery(function(){ 
    $("#box1").delegate("a", "hover", function(event){ 
     var $img = $(this).parent("li").find('img'); 
     var image = $(this).attr('data-img'); 

     if(event.type === 'mouseenter') { 
      if($img.lenght){ 
       $img.show(); 
      }else{ 
       $(this).parent("li").append('<img id="theImg" src="' + image + '" />'); 
      } 
     }else{ 
      if($img){ 
       $img.hide(); 
      } 
     } 
    }); 
});​ 
</script> 

Примечания: Если парения изображения перемещает позицию канала вы получите сумасшедший мигающего эффект. Вам нужно будет добавить css, чтобы убедиться, что это не проблема.