.fadeOut() on a image doesn't seem to be executing

Question

I have a input text box. After the user is idle from typing I want it to submit the form(which works in the below code) and a image of a checkmark to popup then fadeout. I was just trying to test the fadeout function so the img is visible but I can't seem to get it to work.

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);
});

:EDIT#1 Markup

<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>

The way I've achieved this in the past is to wrap my images in a placeholder div and to fade out the div. It's the only fully cross-browser compatible way I've found to achieve this. — Eli Gassert, Jan 02 '13 at 16:05
Can you please provide the markup as well, so that the various DOM traversals you have specified can be verified? — oomlaut, Jan 02 '13 at 16:07
When you submit the form the page reloads so you're likely not going to see the results of any animations. — Anthony Grist, Jan 02 '13 at 16:07
@bukfixart I'm assuming its because of the div tag that is surrounding it. so img isn't in the siblings. — Sinble, Jan 02 '13 at 17:23

score 0 · Answer 1 · answered Jan 02 '13 at 16:55

0

With this markup

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

your code works fine. Test it yourself here http://jsfiddle.net/bukfixart/AvsUH/

answered Jan 02 '13 at 16:55

bukart

4,906
2
21
40

I used the same site you linked to and added my markup and it fails. Thanks for showing me that site btw. – Sinble Jan 02 '13 at 17:18
can you give me a link to your changed variant? – bukart Jan 02 '13 at 19:26

score 0 · Accepted Answer · edited May 23 '17 at 10:24

Updated my code to use parent then next. Seems .next works differently then I expected. I still don't like this as a solution because the textfield could possibly be two levels deep in divs or etc...

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);
});

EDIT#1 Did some more digging Doesn't look like there is a easy solution for what I wanted. Found a solution someone else posted after I knew what i was looking for. Found here

.fadeOut() on a image doesn't seem to be executing

2 Answers2