jquery禁止/恢复按钮_使用jQuery轻松对Web按钮/对象进行动画处理

jquery禁止/恢复按钮

Today I will tell you about animations in web using jQuery. As we know – jQuery offer us several default methods of effects: fade(In/Out/To), hide, show, slide(Down/Toggle/Up), toggle. This is ok, but what if we need more? So, animation will help us! It will help to slide between 2 states using really good effects. By default, ‘easing’ is optional param, so to use extra effects we will use additional jquery.easing.js library.

今天，我将向您介绍使用jQuery的网络动画。 众所周知，jQuery为我们提供了几种默认的效果方法：淡入(淡入/淡出/淡出)，隐藏，显示，滑动(向下/切换/向上)，切换。 可以，但是如果我们需要更多呢？ 因此，动画将帮助我们！ 使用非常好的效果将有助于在两种状态之间滑动。 默认情况下，“ easing”是可选参数，因此，为了使用额外的效果，我们将使用额外的jquery.easing.js库。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code.

这是我们的主页代码。

index.html (index.html)

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="templates/css/main.css" type="text/css" />
<div class="animation_example">
    <h3><a href="#">Animation in jQuery</a></h3>
    <div>
        <div style="margin-bottom:10px;">
            <h4>Sample object:</h4>
            <div class="example_keeper">
                <img id="example" src="files/image.jpg"/>
            </div>
            <div class="actions">
                <input type="radio" value="width" checked name="action" class="action"> Changing width
                <input type="radio" value="position" name="action" class="action"> Changing position
                <input type="radio" value="opacity" name="action" class="action"> Changing opacity
                <select class="selector"></select>
            </div>
        </div>
        <p>
            <b>An example of animations.</b> I made 3 different types of animations: changing size (width), position and opacity. Also I pull all possible effects of easing into Select element. Just choose necessary type and select effect to get demonstration. Try it!
        </p>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="templates/css/main.css" type="text/css" />
<div class="animation_example">
    <h3><a href="#">Animation in jQuery</a></h3>
    <div>
        <div style="margin-bottom:10px;">
            <h4>Sample object:</h4>
            <div class="example_keeper">
                <img id="example" src="files/image.jpg"/>
            </div>
            <div class="actions">
                <input type="radio" value="width" checked name="action" class="action"> Changing width
                <input type="radio" value="position" name="action" class="action"> Changing position
                <input type="radio" value="opacity" name="action" class="action"> Changing opacity
                <select class="selector"></select>
            </div>
        </div>
        <p>
            <b>An example of animations.</b> I made 3 different types of animations: changing size (width), position and opacity. Also I pull all possible effects of easing into Select element. Just choose necessary type and select effect to get demonstration. Try it!
        </p>
    </div>
</div>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

模板/css/main.css (templates/css/main.css)

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.animation_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.actions{margin:10px 0}
.example_keeper{overflow: hidden;width:100%;height:520px;border:1px solid #DDD;background-color:#eee}

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.animation_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.actions{margin:10px 0}
.example_keeper{overflow: hidden;width:100%;height:520px;border:1px solid #DDD;background-color:#eee}

步骤3. JS (Step 3. JS)

Here are necessary JS files to our project.

这是我们项目的必要JS文件。

js / main.js (js/main.js)

$(document).ready(function() {
    var sel1 = $(".selector");
    for (x in jQuery.easing) { // collecting all possible methods of easing
        sel1.append($('<option>').attr('value', x).text(x));
    }
    sel1.change(function(){
        var method = $(this).val();
        var effect = $('input[name=action]:checked').val();
        switch (effect) {
            case 'width':
                $('#example').animate({width:512}, {duration: 1000, easing: method})
                    .animate({width:256}, {duration: 1000, easing: method});
                break;
            case 'position':
                $('#example').animate({marginLeft:256}, {duration: 1000, easing: method})
                    .animate({marginLeft:0}, {duration: 1000, easing: method});
                break;
            case 'opacity':
                $('#example').animate({opacity:0}, {duration: 1000, easing: method})
                    .animate({opacity:1}, {duration: 1000, easing: method});
                break;
        }
    });
});

$(document).ready(function() {
    var sel1 = $(".selector");
    for (x in jQuery.easing) { // collecting all possible methods of easing
        sel1.append($('<option>').attr('value', x).text(x));
    }
    sel1.change(function(){
        var method = $(this).val();
        var effect = $('input[name=action]:checked').val();
        switch (effect) {
            case 'width':
                $('#example').animate({width:512}, {duration: 1000, easing: method})
                    .animate({width:256}, {duration: 1000, easing: method});
                break;
            case 'position':
                $('#example').animate({marginLeft:256}, {duration: 1000, easing: method})
                    .animate({marginLeft:0}, {duration: 1000, easing: method});
                break;
            case 'opacity':
                $('#example').animate({opacity:0}, {duration: 1000, easing: method})
                    .animate({opacity:1}, {duration: 1000, easing: method});
                break;
        }
    });
});

js / jquery.easing.1.3.js和js / jquery.min.js (js/jquery.easing.1.3.js and js/jquery.min.js)

This is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package

这是常见文件–带有插件的jQuery库。 无需在此处提供该文件的完整代码。 它始终可以作为下载包获得

步骤4.图片 (Step 4. Images)

Also we need source image for our project:

另外，我们需要项目的源图像：

现场演示

结论 (Conclusion)

Today I told you how using animations in jQuery. Sure that you will happy to use it in your projects. Good luck!

今天，我告诉您了如何在jQuery中使用动画。 确保您将乐于在项目中使用它。 祝好运！

翻译自: https://www.script-tutorials.com/easily-animate-web-buttonsobjects-using-jquery/

jquery禁止/恢复按钮