Question

我做了这个：This在右边你看到一个红色按钮。当您单击红色按钮时。带有文本的内容屏幕即将到来。但我有一个问题。我可以用其他动画制作这个。如果你握住你的鼠标。然后你可以滑开。用鼠标左键。然后打开内容框。你懂这个了吗？我希望你能帮助我。

你可以在jsfiddle上看到代码。你可以在那里改变它。我希望你能帮助我。我是一个开始javascripter。以及怎么也不知道我怎么能做到这一点。

Answer 1

将处理程序从“click”更改为“mouseenter”
添加了一个“mouseleave”处理程序，它执行相反的操作
将处理程序放在“what-is-delicious”容器上而不是<a>

代码：

$(function () {
    "use strict"
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a");
    box.mouseenter(function (e) {
        e.preventDefault();
        if ($(button).hasClass("open")) {

        } else {
            $("body").append('<div class="background-overlay"></div>');
            button.addClass("open");
            box.animate({ right: "0"}, 750);
        }
    }).mouseleave(function (e) {
        e.preventDefault();
        if ($(button).hasClass("open")) {
            $("body").find('div.background-overlay').remove();
            button.removeClass("open");
            box.animate({ right: -303}, 750);

        } else {
        }
    });
});

“preventDefault（）”调用不再是必要的了，但我把它们留在了那里。

Answer 2

要实施拖动，您可以使用mousedown / mouseup / mousemove，如下所示：http://jsfiddle.net/pimvdb/25y4K/8/。

$(function () {
    "use strict";
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a");

    var mouseDown = false,
        grabbed   = 0,
        start     = -303;

    button.mousedown(function(e) {
        mouseDown = true;
        $('*').bind('selectstart', false); // prevent selections when dragging
        grabbed = e.pageX; // save where you grabbed
        $("body").append('<div class="background-overlay"></div>');
    });

    $('body').mouseup(function() {
        mouseDown = false;
        $('*').unbind('selectstart', false); // allow selections again
        $(".background-overlay").remove();
        start = parseInt(box.css('right'), 10); // save start for next time
                                                // (parseInt to remove 'px')

    }).mousemove(function (e) {
        if(mouseDown) { // only if you are dragging
            // set right to grabbed - pageX (difference) + start 'right' when started
            // dragging. And if you drag too far, set it to 0.
            box.css("right", Math.min(grabbed - e.pageX + start, 0));
        }
    });
});

Answer 3

我认为你正在切换当前在OnClick（）事件中的DIV的Style.Display。可以从Hover（）或MouseOver（）

调用相同的代码

用鼠标打开div而不是单击

3 个答案: