Question

我需要在鼠标悬停时更改图片我尝试了2种不同的方法但它似乎滞后，或有时不工作，或有时工作取决于我检查它的那一刻。我使用的jquery库：http://code.jquery.com/jquery-1.9.1.js 也许问题是我使用的库（我不知道）。对于示例的特定html：

<img id="imgrotate" src="http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg" width="350" height="350" alt="Einstein-Funny-Face">

和2个不同的js代码：

$(document).ready(function() {
    $("img").on({
        "mouseover": function() {
            this.src = "http://www.dorkbotswiss.org/wp-					  content/uploads/2014/08/funnny-2.jpg";
        },
        "mouseout": function() {
            this.src = "http://pursuitnotes.com/wp-  content/uploads/2012/07/Einstein-Funny-Face.jpg";
        }
    });
});

和第二个：

$(document).ready(function() {
    $("img").on({
        "mouseenter": function() {
            this.src = "http://www.dorkbotswiss.org/wp-content/uploads/2014/08/funnny-2.jpg";
        },
        "mouseleave": function() {
            this.src = "http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg";
        }
    });
});

第二个只是在mouserover - mouseenter和mouseout-mouseleave之间的轻微差异。

所以我的问题是为什么延迟，以及为什么它不能完美地工作。有时我甚至需要点击图片来触发它的工作。

这里有2个fiddels： http://jsfiddle.net/pxx71p8c/13/ http://jsfiddle.net/pxx71p8c/4/

提前感谢。

Answer 1

您正在更改图片标记的来源，这将使dom再次加载图像。它可能被缓存到浏览器临时文件中，但仍然需要再次加载它。

解决方案 - 最好使用不同的源创建多个DECLARE @ColumnWidth INT = 3; -- Use to adjust required length of columns A, B and C. DECLARE @ColumnCount INT = 3; -- Use to adjust number of output columns. WITH [Raw] AS ( /* This CTE creates sample records for us to experiment with. * The note column contains each letter of the alphabet, repeated * 3 times. The repeatition will help us validate the result set. * * Using ceiling, to round up, the field length (@ColumnWidth) and * the number of fields (@ColumnCount) and the number of charaters (LEN) * we can calculate how many rows are required. */ SELECT r.ClientId, r.Note, CEILING(CAST(LEN(r.Note) AS DECIMAL(18, 8)) / (@ColumnWidth * @ColumnCount)) AS RecordsRequired FROM ( VALUES (1, 'aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnnooopppqqqrrrssstttuuuvvvwwwxxxyyyzz'), (2, 'aaabbbcccdddeeefffggghhhiiijjjkkklll'), (3, 'aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnno'), (4, 'aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnnoooppp'), (5, 'aaabbbcccdddeeefffggghhhiiijjj'), (6, 'aaabbbcccdd') ) AS r(ClientId, Note) ), MultiRow AS ( /* This CTE uses recursion to return multiple rows for * each orginal row. * The number returned matches the RecordsRequired value * from the Raw CTE. */ SELECT 1 AS RecordNumber, RecordsRequired, ClientId, Note FROM [Raw] UNION ALL -- Keep repeating each record until the number of required rows has been returned. SELECT RecordNumber + 1 AS RecordNumber, RecordsRequired, ClientId, Note FROM MultiRow WHERE RecordNumber < RecordsRequired ) /* Each record returned by the MultiRow CTE is numbered: 1, 2, 3 etc. * Using this we can extract blocks of text from the orginal Note column. */ SELECT ClientId, SUBSTRING(Note, ((@ColumnWidth * @ColumnCount) * RecordNumber) - ((@ColumnWidth * 3) -1), @ColumnWidth) AS Column_A, SUBSTRING(Note, ((@ColumnWidth * @ColumnCount) * RecordNumber) - ((@ColumnWidth * 2) -1), @ColumnWidth) AS Column_B, SUBSTRING(Note, ((@ColumnWidth * @ColumnCount) * RecordNumber) - ((@ColumnWidth * 1) -1), @ColumnWidth) AS Column_C FROM MultiRow ORDER BY ClientId, RecordNumber ;标记并相应地显示/隐藏它们。

<img>

更好的选择是将鼠标事件放在容器div上。

Answer 2

我更喜欢使用css，但如果您需要使用JQuery，请尝试：

$(document).ready(function () {
            $("#imgrotate").mouseover(function () {
                this.setAttribute("src", "http://www.dorkbotswiss.org/wp-content/uploads/2014/08/funnny-2.jpg");
            });
            $("#imgrotate").mouseout(function () {
                this.setAttribute("src", "http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg");
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<img id="imgrotate" src="http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg" width="350" height="350" alt="Einstein-Funny-Face">

鼠标悬停jquery时更改pic的延迟

2 个答案: