функция onclick не работает? JQuery

Question

функция onclick не работает? JQuery

0

Поэтому, благодаря некоторым блестящим умом, я теперь смог сделать мое изображение движением влево/вправо и вверх/вниз с помощью JQuery, проблема в том, что мне нужно изображение для перемещения по горизонтали, а затем, когда щелкнуть мышью, измените вертикальное перемещение вверх/вниз. Код, который мне дал, отлично работает в JSFiddle, но не тогда, когда я его внедряю в свой файл, и я не знаю, почему. Любая помощь приветствуется.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Task 2</title>
<link rel="stylesheet" type="text/css" href="task2.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="task2.js"></script>

<div id="animate">Sample</div>
</head>
</html>

CSS

#animate {
    position: relative;
    border: 1px solid green;
    background: yellow;
    width: 100px;
    height: 100px;
}

JQuery

var width = $(window).width();
var height = $(window).height();
var upleft = 0;

function goRight() {
    $("#animate").animate({
        left: width
    }, 5000, function () {
        setTimeout(goLeft, 50);
    });
}

function goLeft() {
    $("#animate").animate({
        left: 0
    }, 5000, function () {
        setTimeout(goRight, 50);
    });
}

function goUp() {
    $("#animate").animate({
        top: 0
    }, 5000, function () {
        setTimeout(goDown, 50);
    });
}

function goDown() {
    $("#animate").animate({
        top: height
    }, 5000, function () {
        setTimeout(goUp, 50);
    });
}
setTimeout(goRight, 50);

$("#animate").on('click', function () {
    $('#animate').stop();
    if (upleft == 0) {
        goDown();
        upleft = 1;
    } else {
        goLeft();
        upleft = 0
    }
})

Madie 06 май 2014, в 09:37

Источник

0

Можете ли вы проверить FF firebug error console, какую ошибку вы там получаете.
Sandeeproop 06 май 2014, в 07:16
0

Можете ли вы поделиться ссылкой JSFiddle?
Rohit Vyas 06 май 2014, в 07:18
0

Готов ли код в документе готов? api.jquery.com/ready
sinisake 06 май 2014, в 07:18
0

Какую версию jquery вы используете в своей локальной версии?
Stefano Dalpiaz 06 май 2014, в 07:18
0

jsfiddle.net/qVewK - это ссылка JSFIDDLE, и я использую версию 1.11.1, нет, она не завернута в готовый документ, попробую сейчас
Madie 06 май 2014, в 07:22

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

2 ответа

0

Попробуйте сделать это:

$(document).ready(function() {             
var width = $(window).width();
var height = $(window).height();
var upleft = 0;

function goRight() {
    $("#animate").animate({
        left: width
    }, 5000, function () {
        setTimeout(goLeft, 50);
    });
}

function goLeft() {
    $("#animate").animate({
        left: 0
    }, 5000, function () {
        setTimeout(goRight, 50);
    });
}

function goUp() {
    $("#animate").animate({
        top: 0
    }, 5000, function () {
        setTimeout(goDown, 50);
    });
}

function goDown() {
    $("#animate").animate({
        top: height
    }, 5000, function () {
        setTimeout(goUp, 50);
    });
}
setTimeout(goRight, 50);

$(document).on('click', '#animate' function () {
    $('#animate').stop();
    if (upleft == 0) {
        goDown();
        upleft = 1;
    } else {
        goLeft();
        upleft = 0
    }
});
});

Shashikumar Misal 06 май 2014, в 05:21

Ещё вопросы

Можете ли вы проверить FF firebug error console, какую ошибку вы там получаете.
Можете ли вы поделиться ссылкой JSFiddle?
Готов ли код в документе готов? api.jquery.com/ready
Какую версию jquery вы используете в своей локальной версии?
jsfiddle.net/qVewK - это ссылка JSFIDDLE, и я использую версию 1.11.1, нет, она не завернута в готовый документ, попробую сейчас

JellyAce · Accepted Answer · 2014-05-06T05-04-00.000Z

Попробуйте обернуть код jQuery с помощью $ (document).ready

$(document).ready(function() {

    // jQuery code goes here

});

Если я не ошибаюсь, JSFiddle имеет это по умолчанию.

Ура!