Jquery动画不触发的变化

jquery animate not firing onchange

本文关键字：变化 动画 Jquery      更新时间：2023-09-26

我有一个SELECT，我想让它在变化时动画，这里是SELECT代码:

<select id="account_select" onchange="submit_value()">
<option value="">Select account</option>
<option value="1">Account 1</option>
<option value="2">Account 2</option>
</select>

这里是jquery:

function show_keyboard ()
{
    $('.keyboard').animate({bottom: '0px'}, 2000);
}
function submit_value ()
{
    if (!is_number($('#account_select').val()))
    {
        alert('You must select an account');
    }
    else
    {
        show_keyboard();
    }
}

问题是，在我选择一个帐户后，我必须单击屏幕上的某个地方，以便通过show_keyboard函数显示键盘。我不知道为什么。

最好不要使用内联JavaScript。

使用jQuery的change():

http://jsfiddle.net/rw4qB/

编辑

我将使用的代码:

function show_keyboard ()
{
    $('.keyboard').animate({bottom: '0px'}, 2000);
}
$('#account_select').change(function() {
    if ($(this).val() == '') {
        alert('Please select an account');
        return true;
    }
    show_keyboard();
});

HTML

<select id="account_select">
jQuery 

$('#account_select').change(submit_value);

让我知道这是否适合你:

<html>
<head>
    <script type="text/javascript" src="jqueryMIN.js"></script>
    <script>
    function hello() {
        var selObj = $('#direction');
        var slider = $('#slider');
        if (!parseInt(selObj.val()))
        {
             alert('You must select a direction');
        }
        else
        {
             switch(parseInt(selObj.val()))
             {
                case 1:
                    slider.animate({top: 100}, 800)
                break;
                case 2:
                    slider.animate({left: 100}, 800)
                break;
                case 3:
                    slider.animate({ top: 0, left: 0 }, 800)
                break;
             }
        }
    }
    </script>
</head>

<body>
    <select id="direction" onchange="hello()">
        <option value="">Select an direction</option>
        <option value='1'>down</option>
        <option value='2'>right</option>
        <option value='3'>reset</option>
    </select>
    <div id='slider' style='position: relative; display: block; background-color: #00f; width: 100px; height: 100px;'></div>
</body>

将jquery引用替换为jquery-version.js文件的路径。如果这没有像预期的那样工作，那么您的jquery库文件可能出了问题。就像上面提到的，我不建议使用内联方法，但是为了举例，我在这里包括了它。

我知道使用jquery的change函数是一个更好的方法…这个问题似乎在浏览器刷新后自行解决了。

相关文章：