Fatal编程技术网
  • jquery/
  • 在Jquery中单击另一个对象时设置对象动画

在Jquery中单击另一个对象时设置对象动画

jquery animation button

在Jquery中单击另一个对象时设置对象动画,jquery,animation,button,click,move,Jquery,Animation,Button,Click,Move,我已经编出了一个音板。鼠标悬停在一个按钮上，点击它，就会播放一种特殊的声音。当鼠标悬停在按钮上时，earch按钮的图片将变为按下。我的问题是，我无法想象一旦点击按钮#5（中间的那一个），如何将图片从屏幕左侧移动到右侧，比如500px。这张图片就是这个facebook图标，就像下面的占位符代码一样 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/c

我已经编出了一个音板。鼠标悬停在一个按钮上，点击它，就会播放一种特殊的声音。当鼠标悬停在按钮上时，earch按钮的图片将变为按下。我的问题是，我无法想象一旦点击按钮#5（中间的那一个），如何将图片从屏幕左侧移动到右侧，比如500px。这张图片就是这个facebook图标，就像下面的占位符代码一样

 <!DOCTYPE html>
    <html>
     <head>
     <link rel="stylesheet" type="text/css" href="styles.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">


    $('#button5').click(function() {
            $('#cat').animate({
                    right: '+=500'
                    }
                    , 5000 );
                });
});
    $(document).ready(function ()
    {
        var audioon = false;

        $('.button').click(function () 
        { 
            var audioObj = $(this).find("audio");
            var audioTag = audioObj[0];
            audioTag.volume = 0.90;

            if (audioon)
            {
                audioTag.pause();
                audioon = false;

            } else {
                audioTag.play();
                audioon = true;
            }

    });
});
</script>

    <title>Square 205 Soundboard</title>
</head>
<body>
<div class="container">
<div="buttons">
<div id="cat">
<img src="http://www.avca.org/includes/media/images/facebook-icon-small.jpg">
</div>
    <div class="row">
        <div id="button1" class="button">
            <audio preload="none">
                <source src="sounds/DBZ.mp3" type="audio/mpeg">
            </audio>
        </div>
        <div id="button2" class="button">
            <audio preload="none">
                  <source src="sounds/GD.mp3" type="audio/mpeg">
            </audio>
        </div>
        <div id="button3" class="button">
            <audio preload="none">
                <source src="sounds/LeanneBoops.mp3" type="audio/mpeg">
            </audio>
        </div>
    </div>
    <div class="row">
        <div id="button4" class="button">
            <audio preload="none">
                <source src="sounds/MakeMeMoney.mp3" type="audio/mpeg">
            </audio>
        </div>
        <div id="button5" class="button">
            <audio preload="none">
                <source src="sounds/Meow.mp3" type="audio/mpeg">
            </audio>
        </div>
        <div id="button6" class="button">
            <audio preload="none">
                <source src="sounds/Yeah.mp3" type="audio/mpeg">
            </audio>
        </div>
    </div>
    <div class="row">
        <div id="button7" class="button">
            <audio preload="none">
                <source src="sounds/Dang.mp3" type="audio/mpeg">
            </audio>
        </div>
        <div id="button8" class="button">
            <audio preload="none">
                <source src="sounds/Benny.mp3" type="audio/mpeg">
            </audio>
        </div>
        <div id="button9" class="button">
            <audio preload="none">
                <source src="sound.mp3" type="audio/mpeg">
            </audio>
        </div>
    </div>
    <div class="row">
        <div id="button10" class="button">
            <audio preload="none">
                <source src="sound.mp3" type="audio/mpeg">
            </audio>
        </div>
    </div>

    </div>
</div>

</body>

</html>

**CSS**

    body {
    background-color: white;
}

audio {
    display: none;
}


.container {
    width:960px;
    margin:0 auto;
    background:url(buttons/frame.png) no-repeat center top;
    padding-bottom: 110px;
    padding-top: 20px;
}

.row {
    width:100%;
    text-align:center;
}

.button:hover {
    cursor:pointer;
}

.row div{
    display: inline-block;
    margin-right: 2px;
}

.button {
    height:143px;
    width:143px;
}

#button1 {
    background:url(buttons/button1.png) no-repeat;
}

#button1:hover
{
    background:url(buttons/button1p.png) no-repeat;
}

#button2 {
    background:url(buttons/button2.png) no-repeat;
}

#button2:hover
{
    background:url(buttons/button2p.png) no-repeat;
}

#button3 {
    background:url(buttons/button3.png) no-repeat;
}

#button3:hover
{
    background:url(buttons/button3p.png) no-repeat;
}

#button4 {
    background:url(buttons/button4.png) no-repeat;
}

#button4:hover
{
    background:url(buttons/button4p.png) no-repeat;
}

#button5 {
    background:url(buttons/button5.png) no-repeat;
}

#button5:hover
{
    background:url(buttons/button5p.png) no-repeat;
}

#button6 {
    background:url(buttons/button6.png) no-repeat;
}

#button6:hover
{
    background:url(buttons/button6p.png) no-repeat;
}

#button7 {
    background:url(buttons/button7.png) no-repeat;
}

#button7:hover
{
    background:url(buttons/button7p.png) no-repeat;
}

#button8 {
    background:url(buttons/button8.png) no-repeat;
}

#button8:hover
{
    background:url(buttons/button8p.png) no-repeat;
}

#button9 {
    background:url(buttons/button9.png) no-repeat;
}

#button9:hover
{
    background:url(buttons/button9p.png) no-repeat;
}

#button10 {
    background:url(buttons/button1.png) no-repeat;
}

#button10:hover
{
    background:url(buttons/button1p.png) no-repeat;


$（'#按钮5'）。单击（函数（）{
$（“#猫”）。设置动画({
右：'+=500'
}
, 5000 );
});
});
$（文档）.ready（函数（）
{
var audion=假；
$（'.button'）。单击（函数（）
{ 
var audioObj=$（this.find（“audio”）；
var audioTag=audioObj[0]；
audioTag.volume=0.90；
如果（音频）
{
audioTag.pause（）；
audioon=false；
}否则{
audioTag.play（）；
audioon=true；
}
});
});
205方形音板
**CSS**
身体{
背景色：白色；
}
音频{
显示：无；
}
.集装箱{
宽度：960px；
保证金：0自动；
背景：url（buttons/frame.png）无重复中心顶部；
垫底：110px；
填充顶部：20px；
}
.行{
宽度：100%；
文本对齐：居中；
}
.按钮：悬停{
光标：指针；
}
.路政署{
显示：内联块；
右边距：2px；
}
.按钮{
身高：143px；
宽度：143px；
}
#按钮1{
背景：url（buttons/button1.png）不重复；
}
#按钮1：悬停
{
背景：url（buttons/button1p.png）不重复；
}
#按钮2{
背景：url（buttons/button2.png）不重复；
}
#按钮2：悬停
{
背景：url（buttons/button2p.png）不重复；
}
#按钮3{
背景：url（buttons/button3.png）不重复；
}
#按钮3：悬停
{
背景：url（buttons/button3p.png）不重复；
}
#按钮4{
背景：url（buttons/button4.png）不重复；
}
#按钮4：悬停
{
背景：url（buttons/button4p.png）不重复；
}
#按钮5{
背景：url（buttons/button5.png）不重复；
}
#按钮5：悬停
{
背景：url（buttons/button5p.png）不重复；
}
#按钮6{
背景：url（buttons/button6.png）不重复；
}
#按钮6：悬停
{
背景：url（buttons/button6p.png）不重复；
}
#按钮7{
背景：url（buttons/button7.png）不重复；
}
#按钮7：悬停
{
背景：url（buttons/button7p.png）不重复；
}
#按钮8{
背景：url（buttons/button8.png）不重复；
}
#按钮8：悬停
{
背景：url（buttons/button8p.png）不重复；
}
#按钮9{
背景：url（buttons/button9.png）不重复；
}
#按钮9：悬停
{
背景：url（buttons/button9p.png）不重复；
}
#按钮10{
背景：url（buttons/button1.png）不重复；
}
#按钮10：悬停
{
背景：url（buttons/button1p.png）不重复；
CSS
测试这一点有点困难，因为没有包括源图像，也不完全清楚您要实现什么，但我来试一试。javascript的第一部分有一个语法错误，额外的}）；。此外，单击处理程序应该放在$（document）.ready（）中。css的最后一行省略了一个括号，尽管我确信在复制和粘贴过程中忘记了这一点。此外，Atif是正确的-位置：相对应应用于动画的目标。以下是重写的脚本：

<script type="text/javascript">
$(document).ready(function() 
{
    var audioon = false;

    $('.button').click(function() 
    {
        var audioObj = $(this).find("audio");
        var audioTag = audioObj[0];
        audioTag.volume = 0.90;

        if (audioon) 
        {
            audioTag.pause();
            audioon = false;

        } else 
        {
            audioTag.play();
            audioon = true;
        }

    });
    $('#button5').click(function() 
    {
        $('#cat').animate(
        {
            right : '+=500'
        }, 5000);
    });
});
</script>


$（文档）.ready（函数（）
{
var audion=假；
$（'.button'）。单击（函数（）
{
var audioObj=$（this.find（“audio”）；
var audioTag=audioObj[0]；
audioTag.volume=0.90；
如果（音频）
{
audioTag.pause（）；
audioon=false；
}否则
{
audioTag.play（）；
audioon=true；
}
});
$（'#按钮5'）。单击（函数（）
{
$（“#猫”）。设置动画(
{
右：'+=500'
}, 5000);
});
});

<script type="text/javascript">
$(document).ready(function() 
{
    var audioon = false;

    $('.button').click(function() 
    {
        var audioObj = $(this).find("audio");
        var audioTag = audioObj[0];
        audioTag.volume = 0.90;

        if (audioon) 
        {
            audioTag.pause();
            audioon = false;

        } else 
        {
            audioTag.play();
            audioon = true;
        }

    });
    $('#button5').click(function() 
    {
        $('#cat').animate(
        {
            right : '+=500'
        }, 5000);
    });
});
</script>