0

私はJQueryが初めてで、.mouseenter()および.mouseleave()メソッドを機能させる方法を理解しようとしています。これまで IE8 と FF を使用してみましたが、何らかの奇妙な理由で、静的なままにする以外のことを要素に実行させることができません。これが私がこれまでに持っているコードです:

HTML:

<!Doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="file:///D:/Documents%20and%20Settings/stsc/My%20Documents/_prac/script.js"></script>
        <title>Practice</title>
    </head>
    <body>
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="green"></div>
    </body>
</html>

CSS:

div{
    height:100px;
    width: 100px;
    border-radius: 50px;
}

#red{
    background-color: red;
}

#yellow{
    background-color: yellow;
}

#green{
    background-color: green;
}

JS:

$(document).ready(function(){
    $('div').mouseenter(function(){
        $(this).animate({
            width: '+=10px'
        });
    });
    $('div').mouseleave(function(){
        $(this).animate({
            width: '-=10px'
        });
    });
    $('div').click(function() {
        $(this).toggle(1000);
    });
});

これは、JQuery を使用して練習するための簡単な例です。助けてくれてありがとう！

4

2 に答える 2

1

HTML 内で jquery ライブラリを参照する必要があります。

<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="file:///D:/Documents%20and%20Settings/stsc/My%20Documents/_prac/script.js"></script>
    <title>Practice</title>
</head>
于 2013-04-24T23:12:50.793 に答える