Another JQuery Help

JavaScript
1

Uff, I am always stuck. Makes me wonder if I will learn programming ever or not.

OK see this demo. Its done using pure CSS3.
https://dl.dropboxusercontent.com/u/12360312/demos/10/index.html

And here is the same effect I am trying to create using Jquery
https://dl.dropboxusercontent.com/u/12360312/demos/10b/index.html

Here the code for the JQuery version.
HTML:

<div class="container">
	<img src="bg_img.jpg" />
	<div class="header">Title Text</div>
	<div class="bottom">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, to...
	Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, to...	
	</div>
</div>

CSS:

.container {
    width:358px;
	height:539px;
	position:relative;
	overflow:hidden;
}

.header {
	position:absolute;
	top:0;
	left:0;
	width:328px;
    background:rgba(0,0,0,0.8);
    padding:15px;
	color:#fff;
}

.bottom {
    position:absolute;
	bottom:0;
	left:0;
	width:328px;
    background:rgba(0,0,0,0.8);
    padding:15px;
	color:#fff;
}

JQuery:

<script>
$( document ).ready(function() {
	$(".container")
	.mouseover (function() {
		$(".bottom").slideUp("fast");
	})
	.mouseout (function(){
		$(".bottom").slideDown("fast");
	});
});
</script>

Question: The problem is atfirst the slideUp is not working. Only the slideDown is working. Why? What error I have in my JQuery or CSS?

Thank you

2

If you can do it in pure css (and you have the source code), why in the world would you want to duplicate the functionality through jQuery/javascript?

Use the tools as they are intended.

2 Likes
3

Isn’t JQuery intended for doing these kind of stuffs too?

Firstly, its my wish… I want to create it in Jquery.

Secondly, I am learning JQuery… So its more of a practice and hone my skills.

Thirdly, did you saw the performance of CSS animation and Jquery animation. CSS animation is so chirpy compared with that of JQuery animation.

Thanks

4

jQuery is simply a javascript library. Yes, there are scripts which do things which are not easily done in css and/or html. But it’s not intended to do the same thing. Especially with the advances in css that have occurred the last couple years. I’d argue that jQuery really is over engineered in modern terms.

I have no problems with you learning jQuery - I’m just saying to learn to use it for what it’s intended. And not to do something you can do with base functionality without scripting. It’s faster, more accessible, and less maintenance in the long run.

And, I did see the performance of the css vs the jQuery version. The css version was smooth and accurate, where the jQuery version was not. Granted, the script isn’t correct, but I doubt you’re going to get it to a state which will overtake the native css version.

2 Likes
5

As Dave said this is really a CSS job but for practice you could do something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.container {
	width:358px;
	height:539px;
	position:relative;
	overflow:hidden;
	background:#f9f9f9;
}
.header {
	position:absolute;
	top:0;
	left:0;
	width:328px;
	background:rgba(0, 0, 0, 0.8);
	padding:15px;
	color:#fff;
}
.bottom {
	position:absolute;
	bottom:0;
	left:0;
	width:328px;
	background:rgba(0, 0, 0, 0.8);
	padding:15px;
	color:#fff;
	display:none;
}
</style>
</head>

<body>
<div class="container"> <img src="bg_img.jpg" />
  <div class="header">Title Text</div>
  <div class="bottom">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, to...
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, to... </div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!-- keep script at end of html --> 

<script>
$( document ).ready(function() {
	$(".container")
	.mouseover (function() {
		$(".bottom").stop().slideDown("fast");
	})
	.mouseout (function(){
		$(".bottom").stop().slideUp("fast");
	});
});
</script>
</body>
</html>
6

Thank you Dave. Yes I agree with you.

But these browsers are reall buggy. You said that CSS version is smoother than the Jquery version. But in my latest Chrome (Win 7) the Jquery version is butter smooth and the CSS version is chirpy.

7

All my browsers show the complete opposite and the CSS version is ultra smooth and the js version is choppy. JS can never really compete with css animations as the CSS animations are hardware accelerated.

There are of course exceptions and generalisations but 9 times out of 10 a css animation will be smoother if done properly.

All the jquery animations are really choppy and I tend to use velocity.js instead for smoother animation but css still wins out if it can do the required effect.

8

Not if you turn JavaScript off - as many people do. Then the CSS version will be ‘chirpy’ and the jQuery version will not run at all.

9

I don’t know which others prefer, but I know which one I like better.

CSS version

jQuery version

1 Like
10

Thank you to all of you :slight_smile:

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.