如何使用jQuery暫停和啓動gif AJAX

我是一名學生，我試圖在用戶點擊gif時啓動，暫停和啓動gif，但是我一直在如何添加此點擊功能。我知道對象的gif版本是.images.fixed_height.url，靜止圖像是.images.fixed_height_still.url。如果我嘗試追加$（this），我得到的圖像是未定義的。我怎麼會這樣做呢？目前，當您點擊該類別時，會顯示10個gif。感謝您提前提供任何幫助。如何使用jQuery暫停和啓動gif AJAX

代碼：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Giphy</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <style> 
    body { 
     background-image: url('http://www.efoza.com/postpic/2011/04/elegant-blue-wallpaper-designs_154158.jpg'); 
     width: 100%; 
    } 
    button { 
     padding: 0 2%; 
     margin: 0 2%; 
    } 
    h4 { 
     font-size: 165%; 
     font-weight: bold; 
     color: white; 
    } 
    .container { 
     background-color: rgba(0, 0, 0, 0.2); 
     max-width: 1000px; 
     width: 100%; 
    } 
    .btn { 
     margin-top: 2%; 
     margin-bottom: 2%; 
     font-size: 125%; 
     font-weight: bold; 
    } 
    .guide { 
     padding: 3% 0 0 0; 
    } 
    .tag-row { 
     padding: 3% 0 0 0; 
    } 
    .category-row { 
     padding: 3% 0 ; 
    } 
    #photo { 
     padding-bottom: 3%; 
    } 
    </style> 
</head> 

<body> 

    <div class="container"> 
    <div class="row text-center guide"><h4>Click a category and see the current top 10 most popular giphy's of that category!</h4></div> 
    <div class="row text-center tag-row" id="tags"></div> 
    <div class="row text-center category-row"> 
     <input type="" name="" id="category"><button class="btn btn-secondary" id="addTag">Add Category</button> 
    </div> 
    </div> 

    <div class="container"> 
    <div id="photo"></div> 
    </div> 

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script type="text/javascript"> 

    var tags = ["dog", "dolphin", "whale", "cat", "elephant", "otter"]; 

    // Function for displaying movie data 
     function renderButtons() { 

     $("#tags").empty(); 

     for (var i = 0; i < tags.length; i++) { 
      $("#tags").append('<button class="tag-buttons btn btn-primary">' + tags[i] + '</button>'); 
     }  

     } 

    // Add tags function // 

    $(document).on('click', '#addTag', function(event) { 

     event.preventDefault(); 

     var newTag = $("#category").val().trim(); 
     tags.push(newTag); 

     $("#tags").append('<button class="tag-buttons btn btn-primary">' + newTag + '</button>'); 

    }); 

    // Tag button function // 

    $(document).on('click', '.tag-buttons', function(event) { 

     // Keeps page from reloading // 
     event.preventDefault(); 

     var type = this.innerText; 
     console.log(this.innerText); 
     var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + window.encodeURI(type) + "&limit=10&api_key=dc6zaTOxFJmzC"; 

     $.ajax({ 
     url: queryURL, 
     method: "GET" 
     }).done(function(response) { 
     for (var i = 0; i < response.data.length; i++) { 
     $("#photo").append('<img src="' + response.data[i].images.fixed_height_still.url + '" class="animate">'); 
     $('.animate').on('click', function() { 
     $(this).remove().append('<img src="' + response.data[i].images.fixed_height.url + '" class="animate">'); 
     console.log($(this)); 
     }); 
    } 
     }); 

     $("#photo").empty(); 

    }); 
    renderButtons(); 
    </script> 
</body> 
</html>

來源

2017-06-01 willking

fixed_height和fixed_height_still之間的區別將解決問題。如果仔細觀察，只有name_s.gif和name.gif纔會有不同。

所以你可以簡單地交換兩個圖像來創建一個播放器。這將像一個戲劇和停止。不玩和暫停。但在一個小小的gif中，我不認爲暫停真的很重要，停止和暫停看起來很相似。

添加類名的#photo

$("#photo").append('<img class="gif" src="' + response.data[i].images.fixed_height_still.url + '">');

事件處理程序將控制播放和停止

$('body').on('click', '.gif', function() { 
    var src = $(this).attr("src"); 
    if($(this).hasClass('playing')){ 
    //stop 
    $(this).attr('src', src.replace(/\.gif/i, "_s.gif")) 
    $(this).removeClass('playing'); 
    } else { 
    //play 
    $(this).addClass('playing'); 
    $(this).attr('src', src.replace(/\_s.gif/i, ".gif")) 
    } 
});

的jsfiddle演示 https://jsfiddle.net/karthick6891/L9t0t1r2/

來源

2017-06-01 04:59:53 karthick

這是一個了不起的解決方案！爲什麼選擇$（'body'）而不是$（document）？ – willking

在我的項目中習慣了這種類型。我們在身體上發射事件。 :-) – karthick

有道理，再次感謝您的幫助@karthick！ – willking

你可以使用這個jQuery插件http://rubentd.com/gifplayer/

<img class="gifplayer" src="media/banana.png" /> 

<script> 
    $('.gifplayer').gifplayer(); 
</script>

你可以控制這樣

使用這些方法來播放和停止播放器編程

$('#banana').gifplayer('play'); 
$('#banana').gifplayer('stop');

你會在這裏找到更多的細節https://github.com/rubentd/gifplayer

來源

2017-06-01 04:50:11 Rahul

如何使用jQuery暫停和啓動gif AJAX

回答

相關問題