javascript - 我正在尝试使用 JQuery 使点击的图像动画化到它们的位置-6ren

javascript - 我正在尝试使用 JQuery 使点击的图像动画化到它们的位置

转载作者：行者123 更新时间：2023-11-28 12:08:31

25

4

我试图让我页面上的缩略图在单击时“动画化”到位。到目前为止它没有用，但我不知道为什么或如何。有人可以对此提供见解吗？我正在尝试使用“clicky”功能来做到这一点。基本上，我需要小缩略图在页面的正确位置(基本上是页面的中间顶部)“增长”到正确的大小。谢谢!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Farm Animals</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js"> 
    </script>    
    <script>


$('#cluster').hover(function(){
    $(this).closest('cluster').css('display', 'block');
        $(this).closest('cluster').css({ opacity: 1 });
},
function(){
    $(this).closest('cluster').css('display', 'none');
        $(this).closest('cluster').css({ opacity: 0.5 });
}); 

        function hilite(a)
        {

      a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);

        }

    </script>
    <script type="text/javascript">

    function imgFade() 
    {
    $('#cluster, #launch, #gas').fadeTo(0, .3);
    }

$(document).ready(function () {
    $("#cluster, #launch, #gas")
       .mouseover(function () {
          $(this).fadeTo("slow", 1);
       })
       .mouseout(function () {
          $(this).fadeTo("slow", .3);
       });
});

    function clicky(something)
    {
        var t = $(something);
        t.animate({right:"150px",top:"150px"},2000);

    }



        function showImage(clickImg)
        {
            var dest = document.getElementById("dest");
            dest.src=clickImg.src;
            dest.alt=clickImg.alt;
            var descr = document.getElementById("descr")
            if (clickImg.alt == "cluster")
            {
                descr.innerHTML = holsteinDescr;
            }    
            if (clickImg.alt == "gas")
            {
                descr.innerHTML = herefordDescr;
            } 
            if (clickImg.alt == "launch")
                descr.innerHTML = pigDescr;  
        }

        function hilite()
        {
            $("#cluster").fadeIn("slow");
        }

        function lolite(x)
        {
            x.style.borderWidth = "0px";
        }

    </script>
    <style type="text/css">
        .clickable  { cursor:pointer; height:50px; width:50px}
        .thumbTD    { width:60px; height:60px }
        caption     { font-size:18pt; }
        table       { border:0px }
        #dest       { width:400px; height:400px }
        #descr      { width:420px }
        #leftColumn { vertical-align:top }
    </style>
  </head>
  <body onload="imgFade()">
    <table>
        <caption>Select image on left for more information.</caption>
        <tr>
            <td id="leftColumn">
                <table id ="ta">
                    <tr>
                        <td class="thumbTD">
                            <img id="cluster" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this);clicky=(this)" src="cluster.png" alt="holstein"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="thumbTD">
                            <img id="gas" class="clickable" onmouseover="hilite(this);" onmouseout="lolite(this);" 
onclick="showImage(this)" src="gas.png" alt="hereford" />
                        </td>
                    </tr>
                    <tr>
                        <td class="thumbTD">
                            <img id="launch" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this)" src="launch.jpg" alt="pig" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td><img id="dest" src="blank.jpg" alt="blank" /></td>
                    </tr>
                    <tr>
                        <td id="descr" >&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  </body>
</html>

最佳答案

首先，您在全局空间中有两个名为 hilite 的函数。更改其中一个名字。其次，在其中一个中，您有代码:

    a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);

您需要关闭该功能。此外，它的鼠标悬停，而不是 mouseOver。此外，您经常使用非 jquery 对象调用它。要解决这些问题，请使用:

    $(a).mouseover(function(){$("#cluster").fadeTo("slow",0.5);});

您可能还有其他问题。如果您提供图像的完整链接以便我可以测试您的代码，可能会更容易。

关于javascript - 我正在尝试使用 JQuery 使点击的图像动画化到它们的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19611434/

25

4

0

文章推荐： jquery - 从数据库中获取数据至 5 星评级

文章推荐： css - 简单的 css 滚动器在 Firefox 中不起作用

文章推荐： css - Wordpress 自定义 CSS 添加了两次？

c# - 当这么多事情都可能出错时，你所做的就是尝试，尝试，尝试
说真的，你怎么能在不发疯的情况下处理所有这些异常呢？我是不是读了太多关于异常处理的文章或什么？我尝试重构了几次，但每次似乎都以更糟糕的结果告终。也许我应该承认确实会发生异常(exception)情况，
Elixir - 尝试/捕获 vs 尝试/救援？
背景两者 try/rescue和 try/catch是 Elixir 中的错误处理技术。根据 corresponding chapter在介绍指南中。 Errors can be rescued u
尝试:后Python缩进错误
每当我尝试在 Raspberry PI 上运行此 python 脚本时，我都会遇到问题: import socket import sys # Create a TCP/IP socket sock
PHP 尝试，捕获优先级和继承
我想知道一些关于 PHP 的 try , catch声明。让我们考虑以下示例。 abstract class ExceptionA extends Exception {} class Except
Laravel 多重身份验证::尝试
我的 laravel v5.4 项目中有两个模型，user 和 admin。在 config/auth.php 中，我向守卫和提供者添加了管理员，如下所示: 'guards' => [ 'w
python - 尝试/使用Python请求模块的正确方法？
try: r = requests.get(url, params={'s': thing}) except requests.ConnectionError, e: print e
javascript - 尝试/捕获不捕获快速异步功能中的所有错误？
我有以下代码。但是，它并不能捕获所有错误，而我仍然会收到“throw er;//未处理的'错误'事件”。为什么是这样？ app.post('/api/properties/zip/:zip/bed
powershell - 尝试/捕获非法字符
问题与细节我正在使用自定义错误处理，遇到的错误之一是“路径中的非法字符”。我有一个自定义函数，旨在通过路径字符串查找此类非法字符，并在找到它们时引发自定义错误。但是我发现，取决于非法字符，Test-
python - 尝试/除外未捕获错误
This question already has answers here: How do I catch a numpy warning like it's an exception (not j
matlab - 尝试/捕获并使用空字符串错误
我正在使用其他人的代码，但我不熟悉try/catch，因此我举了一个类似的小例子。在第11行上，如果我写了error('')，似乎没有发现错误并增加了索引j。但是，编写error(' ')或error
python - 尝试/除非不排除ValueError
我在我的一个程序中遇到了这个问题，在这种情况下，尝试/异常(exception)的错误使程序变得更好，以防用户意外输入了他们不应该输入的内容。它仍然给我错误，我为为什么感到困惑。如果对我的问题确实很重
tsql - 尝试…将错误捕获到错误日志表中
我在尝试TRY ... CATCH块时遇到问题。有人可以解释为什么以下代码无法执行我的sp吗？ DECLARE @Result int SET @Result = 0 BEGIN TRY SE
PowerShell 尝试/捕获并重试
我有一个相当大的 powershell 脚本，其中包含许多(20 多个)执行各种操作的函数。现在所有代码实际上都没有任何错误处理或重试功能。如果某个特定的任务/功能失败，它就会失败并继续。我想改进
java - 尝试/捕获和输入不匹配异常
为什么我尝试时需要导入 inputmismatchException catch(InputMismatchException e){ System.out.println("
java - 尝试/捕获异常未按计划工作
我对此感到困惑 - 我为辅助方法编写了一个 try/catch 。它的目的是捕获任何无效输入(任何不是“男性”或“女性”的内容(没有特定情况)。如果输入无效，它将通知用户，然后让他们重试。如果有效，则
java - 尝试..捕获场景
我有时会发现自己处于如下场景。尽可能简单地陈述问题 “有时我会创建一段代码，Java 让我将其包含在 try/catch 语句中。我没有使用 catch，所以我将其留空。为什么这是错误的？” boo
java - 尝试/捕获错误
我有点困惑为什么当我不使用 Try block 时会出现 Try block 错误。我在代码块底部附近收到错误通知。如果我不使用 try/catch，有人可以向我解释为什么会发生这种情况吗？它是否
java - 尝试 while 循环时编码出错
我已经盯着我的电脑两个小时了，我不知道我做错了什么。谁能帮助我看到光明？ package blackjack; import java.util.Random; import java.util.Sc
java - 尝试 - 捕获枚举
我想将方法保存在 Enum 中，但 Class.getDeclaredMethod 抛出 NoSuchMethodException，那么我该如何处理呢？我的代码: public enum Car
Python 尝试...除了命令行
这个问题已经有答案了: Executing multi-line statements in the one-line command-line (18 个回答) 已关闭 3 年前。如何使用try.

首页

博学

6Ren·AI

商城

javascript - 我正在尝试使用 JQuery 使点击的图像动画化到它们的位置