3

私は過去1時間ほどグーグルで検索してきましたが、この問題の解決策を見つけられないようです. codecademy の jQuery コースを終えたばかりで、現在プロジェクトに取り組んでいます。何らかの理由で私のコードのjqueryコードが機能しません

jQuery: 

$(document).ready(function(){
$("div").css("border", "3px solid red");
$(".storyblocks").mouseenter(function(){
    $(this).animate({
        height: "+= 20px"
        width: "+= 20px"
    });
});

$(".storyblocks").mouseleave(function(){
    $(this).animate({
        height: "-= 20px"
        width: "-= 20px"
    });
});
});

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Project Website</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>

$("div").css("border", "3px solid red");div に赤い境界線があるかどうかを確認するために を追加しましたが、これまでのところ運がありません。$(document).ready は必要ないと言う人もいますが、その理由がわかりません。

助けてください？

4

4 に答える 4

4

jQueryが機能しないという問題は、jQueryを別のファイルに入れることとは関係ありません。小さな構文エラーと関係があります。アニメーションプロパティの間にコンマがなく、アニメーションプロパティが間違った構文を使用しています。

コードは次のとおりですが、必要なコンマと、プロパティをアニメーション化するための適切な構文が含まれています。

http://jsfiddle.net/4xfAZ/2/

コンマはここにあります：

$(document).ready(function () {

    $("div").css("border", "3px solid red");
    $(".storyblocks").mouseenter(function () {
        $(this).animate({
            height: ($(this).height() + 20) + 'px',
            width: ($(this).width() + 20) + 'px'
        });
    });

    $(".storyblocks").mouseleave(function () {
        $(this).animate({
            height: ($(this).height() - 20) + 'px',
            width: ($(this).width() - 20) + 'px'
        });
    });
});

高さの宣言の後、次の宣言の前に、カンマで区切る必要があります。

jQuery がエラーになったため、何もしませんでした。そのため、赤い境界線が表示されませんでした :) 赤い境界線のコードは問題のあるコードとは別のものですが。

HTH

于 2013-11-08T04:36:09.747 に答える
1

これを試して：

+=20px動作しません div の高さを見つけてから add/subtract する必要があります20px。

    $(document).ready(function(){
        $("div").css("border", "3px solid red");
        $(".storyblocks").mouseenter(function(){
            var h = $(this).height()+20;
            var w = $(this).width()+20;
            $(this).animate({
                height: h+"px",//add comma here
                width: w+"px"
            });
        });
        $(".storyblocks").mouseleave(function(){
            var h = $(this).height()-20;
            var w = $(this).width()-20;
            $(this).animate({
                height: h+"px",//add comma here
                width: w+"px"
            });
        });
    });

ここでフィドル。

于 2013-11-08T04:37:46.877 に答える