Skip to content

Instantly share code, notes, and snippets.

@TechFounder

TechFounder/jsbin.oxudiw.css

Created August 3, 2013 04:31
Show Gist options
  • Save TechFounder/6145195 to your computer and use it in GitHub Desktop.
Save TechFounder/6145195 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.oxudiw.css
img {
cursor:pointer;
}
Raw
jsbin.oxudiw.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="loader">
<p id='title'>Title</p>
<p id='body'>Body</p>
</div>
<img src="http://w3schools.com/images/compatible_safari.gif" class="something"/>
</body>
</html>
Raw
jsbin.oxudiw.js
$('.something').hover(function() {
// set variables
loader = $('#title'),
loaderB = $('#body'),
origTxt = loader.text(),
origTxtB = loaderB.text(),
newTxt = 'New Title',
newTxtB = 'New Body';
//on mouse over
loader.stop(true, true).fadeOut(600, function() {
$(this).text(newTxt);
}).fadeIn(600);
loaderB.stop(true, true).fadeOut(600, function() {
$(this).text(newTxtB);
}).fadeIn(600);
}, function() {
//on mouse out
loader.stop(true, true).fadeOut(600, function() {
$(this).text(origTxt);
}).fadeIn(600);
loaderB.stop(true, true).fadeOut(600, function() {
$(this).text(origTxtB);
}).fadeIn(600);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment