货物

JQuery，我们如何用JQuery实现动态效果

使用 JQuery，您可以通过作用于 HTML 页面的元素来创建动态效果、动画和淡入淡出。

在本文中，我们将看到如何使用不同的 JQuery 方法来生成动画。

内容

隐藏和显示 HTML 元素

方法 `hide`（）和 `show`()

hide() 方法简单地设置内联样式 display: none 对于选定的项目。相反，show() 方法恢复显示属性。

让我们看一个例子：

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

在第一种情况下，当您单击按钮 (hide-btn)，在第二种情况下，当您单击按钮时显示段落 (show-btn).

您还可以指定持续时间参数，以在一段时间内动画显示和隐藏效果。

可以使用前置字符串之一指定持续时间defi黑夜 'slow' o 'fast'，或以毫秒为单位，以获得更高的准确性；较高的值表示较慢的动画。

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

字符串预defi尼特 'fast' 表示持续时间为 200 毫秒，而字符串 'slow' 表示持续时间为 600 毫秒。

我们可以指定一个函数 callback 在方法完成后执行 show() 或戴尔' hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

切换方法

jQuery 方法 toggle() 以这样的方式显示或隐藏项目：如果项目最初显示，它将被隐藏；相反，如果隐藏，它将显示（实际上切换其可见性）。

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

同样，您可以指定参数 duration 对于方法 toggle()，以这样一种方式来动画可见和隐藏之间的过渡，如方法 show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

同样，你也可以指定一个函数 callback 对于方法 toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

jQuery 淡入淡出效果

方法 `fadeIn()` e `fadeOut()`

您可以使用 jQuery 方法 fadeIn()e fadeOut() 显示或隐藏 HTML 元素，逐渐增加或减少它们的不透明度并创建淡入淡出的效果。

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

与其他 jQuery 效果方法一样，您可以选择为方法指定持续时间或速度参数 fadeIn()e fadeOut()，以控制淡入淡出的持续时间。可以使用前置字符串之一指定持续时间defi黑夜 'slow' o 'fast'，或以毫秒为单位；较高的值表示较慢的动画。

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

方法的效果 fadeIn() / fadeOut() 它类似于 show() / hide(), 但不同于方法 show() / hide(), 前者只为目标元素的不透明度设置动画，而不为它们的大小设置动画。

你也可以指定一个函数 callback 在方法完成后运行 fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

方法 `fadeToggle()`

jQuery 方法 fadeToggle() 通过动画显示或隐藏所选元素的不透明度，这样如果元素最初显示，它将淡出；如果它被隐藏，它将淡出（即切换淡入淡出效果）。

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

您还可以为方法指定生命周期参数 fadeToggle() 至于方法 fadeIn() / fadeOut(), 以控制淡入淡出动画的持续时间或速度。

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

fadeToggle() 方法也可以指定一个函数 callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

方法 `fadeTo()`

jQuery 方法 fadeTo() 它类似于方法 fadeIn(), 但不同于方法 fadeIn()，方法 fadeTo() 让您将元素混合到一定程度的不透明度。

$(selector).fadeTo(speed, opacity, callback);

所需参数 opacity 指定目标元素的最终不透明度，可以是 0 到 1 之间的数字。参数 duration o speed 此方法也需要指定动画淡入淡出的持续时间。

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

污染效果

方法 `slideUp()` e `slideDown()`

jQuery 方法 slideUp() e slideDown() 用于通过逐渐降低或增加它们的高度（即向上或向下滚动它们）来隐藏或显示 HTML 元素。

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

与其他 jQuery 效果方法一样，您可以选择为方法指定持续时间或速度参数 slideUp() e slideDown() 控制幻灯片动画的持续时间。可以使用前置字符串之一指定持续时间defi黑夜 'slow' o 'fast'，或以毫秒为单位；较高的值表示较慢的动画。

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

您还可以指定一个回调函数在方法完成后执行 slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

方法 `slideToggle()`

jQuery 方法 slideToggle() 通过动画显示或隐藏所选元素的高度，这样如果元素最初显示，它将向上滚动；如果隐藏，它将向下滚动，即在方法之间切换 slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

同样，您可以为方法指定生命周期参数 slideToggle() 如何 slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

同样，你也可以为方法指定一个回调函数 slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

动画效果

方法 `animate()`

jQuery 方法 animate() 它用于创建自定义动画。方法 animate() 用于动画数字 CSS 属性，例如 width, height, margin, padding, opacity, top, left 等等但非数字属性，如 color o background-color 它们不能使用基本的 jQuery 功能进行动画处理。

方法的基本语法 animate() 如下：

$(selector).animate({ properties }, duration, callback);

方法参数 animate() 具有以下含义：

所需的属性参数 defi完成 CSS 属性以进行动画处理。
可选的持续时间参数指定动画将运行多长时间。可以使用前置字符串之一指定持续时间defi黑夜 'slow' o 'fast'，或以毫秒为单位；较高的值表示较慢的动画。
可选的回调参数是动画完成后调用的函数。

下面是该方法的一个简单示例 animate() 单击按钮时，它会将图像从其原始位置向右移动 300 像素。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

您还可以使用该方法同时为一个元素的多个属性设置动画 animate(). 所有属性同时动画，没有任何延迟。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

您还可以使用 jQuery 的串联功能在队列中逐个为一个元素的多个属性设置动画。

下面的示例显示了一个排队或链接的 jQuery 动画，其中每个动画将在元素上的前一个动画完成后开始。我们将在以后的文章中看到串联功能。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

这也是可能的 defi完成动画属性的相对值。如果使用前缀指定值 += o -=, 目标值是通过从属性的当前值中加上或减去指定的数字来计算的。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

除了数值，每个属性都可以接受字符串 'show', 'hide' e 'toggle'. 如果您只想将属性从当前值设置为初始值，反之亦然，这将非常有用。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

方法 `stop()`

jQuery 方法 stop() 用于在完成之前停止当前正在运行的 jQuery 动画或对所选元素的效果。

方法的基本语法 stop() jQuery 可以通过以下方式给出：

$(selector).stop(stopAll, goToEnd);

上述语法中的参数含义如下：

Il 可选参数布尔值 stopAll，指定是否删除排队的动画。预defi奈特是 false，这意味着只会停止当前动画，队列中的其余动画将稍后执行。
布尔参数 goToEnd 可选指定是否立即完成当前动画。预defi奈特是 false.

这是一个演示该方法的简单示例 stop() 在实际操作中，您可以在单击按钮时开始和停止动画。

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

这是此方法的另一个示例，如果您再次单击该按钮Slide Toggle” 在开始动画之后但在它完成之前，动画会立即从保存的起始点的相反方向开始。

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

在创建动画悬停效果时，您可能遇到的最常见问题之一是当您快速放置和移除鼠标光标时，多个动画排队。为什么，在这种情况下， mouseenter “ mouseleave 事件在动画完成之前被快速触发。为避免此问题并创建漂亮流畅的悬停效果，您可以添加 stop(true, true)到方法链，像这样：

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

打回来

JavaScript 语句逐行执行。但是，由于 jQuery 效果需要一些时间才能完成，下一行代码可能会在前一个效果仍在运行时运行。为了防止这种情况发生，jQuery 为每个效果方法提供了一个回调函数。

回调函数是在效果完成后运行的函数。回调函数作为参数传递给效果的方法，它们通常作为最后一个方法参数出现。例如jQuery效果方法的基本语法 slideToggle() 带有一个回调函数，可以指定如下：

$(selector).slideToggle(duration, callback);

考虑以下示例，我们在其中放置了语句 slideToggle()e alert()一个挨着另一个。如果您尝试此代码，则在单击切换按钮后将立即出现警报，而无需等待滑动切换效果完成。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

这是我们插入语句的前一个示例的修改版本 alert() 在该方法的回调函数中 slideToggle(). 如果您尝试此代码，一旦滑动切换效果完成，就会出现警告消息。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

同样，你可以 defi完成其他 jQuery 效果方法的回调函数，例如 show(), hide(), fadeIn(), fadeOut(), animate()等。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

如果您尝试上面的示例代码，您将收到两次相同的警告消息，每个项目一次 <h1> e <p>，点击激活按钮后。

BlogInnovazione.it

标签： jQuery的

28 年 2023 月 10 日下午 58:XNUMX

后 Laravel：什么是 Laravel 视图 »

前 « Verimatrix 安全交付平台在第一年结束时为每个视频观众提供了数十亿个许可证

Articoli最新回应

货物

卡塔尼亚综合诊所的 Apple 观众对增强现实进行创新干预

卡塔尼亚综合诊所使用 Apple Vision Pro 商业查看器进行了眼部整形手术……

3 2024五月

货物

儿童涂色页的好处 - 适合所有年龄段的魔法世界

通过着色培养精细运动技能可以帮助孩子们为写作等更复杂的技能做好准备。填色…

2 2024五月

货物

未来已来：航运业如何彻底改变全球经济

海军部门是真正的全球经济力量，已迈向 150 亿美元的市场……

1 2024五月

货物

出版商和 OpenAI 签署协议以规范人工智能处理的信息流

上周一，英国《金融时报》宣布与 OpenAI 达成协议。英国《金融时报》授予其世界级新闻报道许可……

四月30 2024

JQuery，我们如何用JQuery实现动态效果

使用 JQuery，您可以通过作用于 HTML 页面的元素来创建动态效果、动画和淡入淡出。

隐藏和显示 HTML 元素

方法 hide（） 和 show()

切换方法

jQuery 淡入淡出效果

方法 fadeIn() e fadeOut()

方法 fadeToggle()

方法 fadeTo()

污染效果

方法 slideUp() e slideDown()

方法 slideToggle()

动画效果

方法 animate()

方法 stop()

打回来

Articoli最新回应

卡塔尼亚综合诊所的 Apple 观众对增强现实进行创新干预

儿童涂色页的好处 - 适合所有年龄段的魔法世界

未来已来：航运业如何彻底改变全球经济

出版商和 OpenAI 签署协议以规范人工智能处理的信息流

Articoli最新回应

标签

方法 `hide`（）和 `show`()

方法 `fadeIn()` e `fadeOut()`

方法 `fadeToggle()`

方法 `fadeTo()`

方法 `slideUp()` e `slideDown()`

方法 `slideToggle()`

方法 `animate()`

方法 `stop()`