.fadeOut（）在圖像上似乎沒有執行

我有一個輸入文本框。在用戶輸入空閒之後，我希望它提交表單（它在下面的代碼中工作）和一個複選標記的圖像彈出然後淡出。我只是試圖測試淡出功能，所以IMG是可見的，但我似乎無法讓它工作。.fadeOut（）在圖像上似乎沒有執行

var timer = null; 
$('.form_timer').keyup(function() 
{ 
    if (timer) { 
     clearTimeout(timer); 
    } 

    var test = $(this); 
    timer = setTimeout(function() { 
     test.next('img').fadeOut('slow'); 
     test.closest('form').submit(); 

    }, 700); 
});

：編輯＃1標記

<div class="accordion"> 
    <div class="group"> 
     <form accept-charset="UTF-8" action="/tasks/2" class="simple_form edit_task" data-remote="true" id="edit_task_2" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="Fil9PitLB6ZhHtWwBOehbOBkq2yE6qikN5cU0zr4wRQ=" /></div> 
      <h3><div class="input string optional"><label class="string optional control-label" for="name_2">Task Name</label><input class="string optional form_timer" id="name_2" name="task[name]" placeholder="New Task" size="50" type="text" value="somethingdd" /></div></h3> 
      <div> 
       <div class="input string optional" style="display: inline"><label class="string optional control-label" for="description_2">Description</label><input class="string optional form_timer" id="description_2" name="task[description]" size="50" type="text" value="blah123asdfgokkkkkasddadsdd" /></div><img alt="checkmark" class="form_checkmark" height="20px" src="/assets/checkmark.jpg" width="20px" /> 
      </div> 
     </form> 
    </div> 
</div>

來源

2013-01-02 Sinble

我過去實現這個的方式是將我的圖像封裝在佔位符div中並淡出div。這是我發現實現這一目標的唯一完全跨瀏覽器兼容的方式。 –

您是否也可以提供標記，以便可以驗證您指定的各種DOM遍歷？ – oomlaut

當您提交表單時，頁面會重新加載，因此您很可能不會看到任何動畫的結果。 –

更新了我的代碼，然後使用父代然後下一個。似乎.next的工作方式與我的預期不同。我還是不喜歡這是一個解決方案，因爲該文本框也可能會被兩層深在的div或等..

var timer = null; 
$('.form_timer').keyup(function() 
{ 
    if (timer) { 
     clearTimeout(timer); 
    } 

    var test = $(this); 
    timer = setTimeout(function() { 
     test.parent().next('.form_checkmark').fadeOut('slow'); 
     test.closest('form').submit(); 

    }, 700); 
});

編輯＃1做了一些更多的挖看起來不像是有容易我想要的解決方案。在知道我在找什麼後，找到別人發佈的解決方案。找到here

來源

2013-01-02 17:38:56 Sinble

有了這個標記

<form method="get"> 
    <textarea class="form_timer">type in here</textarea> 
    <img src="" width="200" height="150" style="display:block;background:#0c0;"/> 
</form>

你的代碼工作正常。 http://jsfiddle.net/bukfixart/AvsUH/

來源

2013-01-02 16:55:43 bukart

我使用了您鏈接到的相同網站並添加了我的標記，並且失敗。感謝您展示我的網站順便說一句。 – Sinble

你能給我一個鏈接到你的變化的變種？ – bukart

看看我提供的答案。它顯示我的解決方案。 – Sinble

.fadeOut（）在圖像上似乎沒有執行

回答

相關問題