jQuery Обратный звонок для fadeIn и fadeOut

Я просмотрел некоторые другие сообщения в этом сообществе о проблеме ниже и не нашел того, что я ищу ... хотя я нашел ниже HTML и jQuery, что был похож, но не совсем тем, что я искал. Это к домашнему заданию, кстати, я хотел бы с этим справиться. Однако я вытаскиваю волосы.jQuery Обратный звонок для fadeIn и fadeOut

С учетом сказанного, я ищу помощь, чтобы выполнить функцию обратного вызова в соответствии с приведенными ниже инструкциями, которые уменьшат исходное изображение, а затем автоматически отображают новый заголовок и изображение. Старый заголовок и изображение должны исчезнуть, и новый заголовок и изображение должны исчезнуть. Я всего лишь обо всем этом и хотел бы узнать все, что могу. Я знаю, что чего-то не хватает. Каждый раз, когда я помещаю закомментированный фрагмент, он исчезает. Ниже приведен сценарий:

$(document).ready(function() { 
    $("#image_list a").click(function(pre) { 
    pre.preventDefault(); 
    $("#image").fadeOut(1000); 
    change($(this)).delay(1000); 
    $("#caption").fadeOut(1000); 
    change($(this)).delay(1000); 
    }); //end click 
}); //end ready 

//image and caption fade 
var change = function(img) { 
    var caption = img.attr("title"); 
    var imageURL = img.attr("href"); 
    $("#caption").text(caption); 
    //$(#caption).fadeIn(); 
    $("#image").attr("src", imageURL); 
    $("#image").fadeIn(); 
}; //end image and caption fade

Вот это HTML:

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Image Swap</title> 
    <link rel="stylesheet" href="main.css" /> 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="image_swap.js"></script> 
</head> 
<body> 
    <main> 
     <h1>Ram Tap Combined Test</h1> 
     <ul id="image_list"> 
      <li><a href="images/h1.jpg" title="James Allison: 1-1"> 
       <img src="thumbnails/t1.jpg" alt=""></a></li> 
      <li><a href="images/h2.jpg" title="James Allison: 1-2"> 
       <img src="thumbnails/t2.jpg" alt=""></a></li> 
      <li><a href="images/h3.jpg" title="James Allison: 1-3"> 
       <img src="thumbnails/t3.jpg" alt=""></a></li> 
      <li><a href="images/h4.jpg" title="James Allison: 1-4"> 
       <img src="thumbnails/t4.jpg" alt=""></a></li> 
      <li><a href="images/h5.jpg" title="James Allison: 1-5"> 
       <img src="thumbnails/t5.jpg" alt=""></a></li> 
      <li><a href="images/h6.jpg" title="James Allison: 1-6"> 
       <img src="thumbnails/t6.jpg" alt=""></a></li> 
     </ul> 
     <h2 id="caption">James Allison: 1-1</h2>    
     <p><img src="images/h1.jpg" alt="" id="image"></p> 
    </main> 
</body> 
</html>

источник

2016-02-17 Hawksquest

Вы звоните '.delay (1000),' 'на изменения ($ (this)) ', но' change' ничего не возвращает. – Stryner

Использование обратного вызова при условии:

$("#image").fadeOut(1000, function() { 
    console.log("Done fading, do something else"); 
});

источник

2016-02-17 20:33:23 tymeJV

jQuery Обратный звонок для fadeIn и fadeOut

ответ

Смежные вопросы