We Keep Coding

Remove Entire Modal with Jquery

I've been looking at previously posted StackOverflow questions, and still could not find my answer. So, I've been trying to simply delete the entire modal when I click on the close button. I can't get it to work, unfortunately. This is my code, so far.
var jQueryLoaded = 0;
function Modal(title, contents) {
if (jQueryLoaded === 1) {
var modal = document.createElement('div'),
modal_box = document.createElement('div'),
modal_head = document.createElement('div'),
modal_title = document.createElement('div'),
close_btn = document.createElement('div'),
modal_content = document.createElement('div');
modal.className = 'modal';
modal_box.className = 'modal_box';
modal_head.className = 'modal_head';
modal_title.className = 'modal_title';
modal_title.innerHTML = title;
close_btn.className = 'modal_close';
close_btn.innerHTML = '\u00D7';
modal_content.className = 'modal_content';
modal_content.innerHTML = contents;
$("body").append(modal);
$(modal).append(modal_box);
$(modal_box).append(modal_head, modal_content);
$(modal_head).prepend(modal_title);
$(modal_head).append(close_btn);
} else {
console.warn('jQuery, a required library, is not available at moment of function run. Please double check jQuery is loaded properly before running this function again.');
}
}
$(document).ready(function () {
jQueryLoaded = 1;
$("div.modal_close").on('click', function () {
$(this).parent().parent().closest('.modal').remove();
});
Modal('hello','<p>Example</p>');
});
/* Modals based off of W3Schools example! */
div.modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
div.modal > div.modal_box {
background: #FFFFFF;
margin: auto;
padding: 5px;
border: 1px solid #000000;
width: 80%;
box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.6);
}
div.modal > div.modal_box > div.modal_head {
width: 100%;
height: auto;
border: none;
border-radius: 0;
border-bottom: 1px solid #000000;
min-height: 10px;
font-weight: 16px;
}
div.modal > div.modal_box > div.modal_head > div.modal_title {
display: inline-block;
color: #000000;
text-align: center;
font-weight: 900;
font-size: 24px;
}
div.modal > div.modal_box > div.modal_head > div.modal_close {
margin: 1px;
font-weight: 900;
color: #000000;
border: 1px solid transparent;
padding: 2px;
border-radius: 5px;
background: transparent;
cursor: pointer;
float: right;
line-height: 10px;
user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-k-user-select: none;
-moz-user-select: none;
}
div.modal > div.modal_box > div.modal_head > div.modal_close:hover,
div.modal > div.modal_box > div.modal_head > div.modal_close:focus {
border: 1px solid #000000;
background: rgba(0, 0, 0, 0.3);
}
div.modal > div.modal_box > div.modal_head > div.modal_close:active {
background: rgba(255, 0, 0, 0.8);
border: 1px solid #000000;
}
div.modal > div.modal_box > div.modal_content {
padding: 4px;
padding-left: 10px;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Mind you, the code to remove the modal was just the last one I tried. I tried many others like $(this).parent().parent().closest('.modal').remove(); and $(this).parent().parent().find('.modal').remove().

You're mixing JS and jQuery, not that it's not good, but you use it in an inappropriate way. jQuery is designed to help you manipulate with DOM and events - make use of it!
If you're building a Modal function to handle modals, the close should be handled from within the script, not by adding extra stuff all around your .js files.
How do you call your Modal?
Here's an example to give you an idea and get you started:
jQuery(function ($) { // DOM is ready and $ alias secured
Modal("opened",{
title : "Opened example",
content : "<p>Immediately opened from JS using <code>.open()</code></p>"
}).open();
Modal("test1", {
title : "This is Title",
content :
`<p>
<b>Lorem Ipsum</b>
Dolor sit amet<br>
Example
</p>`
});
Modal("another", {
title: "Auto-hide in 3sec",
content: "<p>Like it? <b>Show some love</b></p>",
duration: 3000
});
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
[data-modal]{ color:blue; cursor:pointer; }
<h1>Modal Demo</h1>
Click <a data-modal="test1">here</a> to call modal ID test1<br>
or you can click <a data-modal="another">here</a> to call another modal
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/** Modal - Custom modals example by RokoCB
* #param {String} modalId - A modal name used to reference a modal
* #param {Object} data - {title:"String", content:"HTML", duration:ms}
* #return {Object} - methods: .open() .close()
*/
function Modal(modalId, data) {
// DEFAULT MODAL STYLES
var css = {
area: {
position: "fixed",
visibility: "hidden",
opacity: 0,
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: 99999,
background: "rgba(0,0,0,0.4)",
transition: "0.4s",
},
modal: {
position: "absolute",
left: "50%",
top: "50%",
minWidth: 240,
transform: "translate(-50%, -50%)",
background: "#fff",
boxShadow: "0 8px 24px rgba(0,0,0,0.6)",
},
title: {
padding: "8px 32px 8px 16px",
fontSize: 18,
borderBottom:"1px solid rgba(0,0,0,0.15)",
},
content: {
padding: "16px",
},
close: {
position: "absolute",
top: 4,
right: 4,
padding: 8,
cursor: "pointer",
userSelect: "none",
}
}
// ELEMENTS
var $area = $("<div/>", {
class: "modal_area",
appendTo: "body",
css: css.area,
click : closeModal,
});
var $modal = $("<div/>", {
class: "modal",
appendTo: $area,
css: css.modal,
click: function(evt){evt.stopPropagation();}
});
$("<div/>", {
class: "modal_title",
appendTo : $modal,
text : data.title,
css: css.title,
});
$("<div/>", {
class: "modal_content",
appendTo : $modal,
html : data.content,
css: css.content,
});
$("<div/>", {
class: "modal_close",
appendTo : $modal,
text : '\u00d7',
css: css.close,
click : closeModal,
});
// ACTIONS
var closeTimeout = null;
function closeModal() {
$area.removeClass("open").css({visibility:"hidden", opacity:0});
}
function openModal() {
$area.addClass("open").css({visibility:"visible", opacity:1});
if(data.duration) {
clearTimeout(closeTimeout);
closeTimeout = setTimeout(closeModal, data.duration);
}
}
$(document).on("click", "[data-modal='"+modalId+"']", openModal);
// METHODS
return {
open : openModal,
close : closeModal
}
}
</script>

The button will have no event listener attached to it because you're creating it after the attaching of the event listener. There is two solution for this:
EITHER:
Add the event listener just after the button is created inside the Modal class here:
close_btn.onclick = function() {
$(this).closest('.modal').remove();
}
OR:
Use event delegation like this:
$(document).on('click', 'div.modal_close', function () {
$(this).closest('.modal').remove();
});
NOTE: Since, as mentioned in the comments, you are already using jQuery why not using it inside the Modal class too.

How to toggle a .click easier?

I am working on my final for my webpage development class, I am trying to make a blog themed website. I want to make my code it so that there is a profile picture and when clicked it turns into a box and reveals a bio and some other info. I already have that part done, but now I want to make it so that when the profile picture is clicked again, it will make the box and the info disappear. I understand that there are ways and I have tried some but to no success. When I try .toggle, it just disappears it completely. Any advice would help, thank you
(JSfiddle wasn't working for me, sorry) >
CodePen
JavaScript:
$(document).ready(function() {
$('#picback').click(function() {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
});
});

We're in 2015. Javascript or jQuery is not needed here!
Use CSS transitions and make use of :checked pseudo class. This way you can also easily set an initial state.
Fully working demo: http://codepen.io/anon/pen/mJrvXo
#visibleToggle {
display: none;
}
#picback {
background-color: #B8B8B8;
border-radius: 50%;
width: 230px;
height: 230px;
border: 2px solid white;
margin: 0 auto;
box-shadow: 0 0 5px;
text-align: center;
transition-duration: 0.6s;
}
#picback:hover {
box-shadow: 0px 0px 8px black;
cursor: pointer;
}
#profilepic {
height: 200px;
position: relative;
top: 16px;
left: 2px;
}
#profilepic:hover {
cursor: pointer;
}
#name {
font-family: 'Playball', cursive;
color: blue;
text-shadow: 0 0 3px white;
}
#age {
font-family: 'Pragati Narrow', sans-serif;
font-size: 25px;
}
#bio {
font-family: 'Roboto', sans-serif;
color: white;
}
#info {
opacity: 0;
}
#visibleToggle:checked + #picback {
border-radius: 120px 120px 2px 2px;
height: 460px;
}
#visibleToggle:checked + #picback #info {
opacity: 1;
}
<input type="checkbox" id="visibleToggle" />
<div id='picback'>
<label for="visibleToggle">
<img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic' />
</label>
<div id='info'>
<h2 id='name'>Joshua T. Hurlburt</h2>
<h2 id='age'>15</h2>
<p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
</div>
</div>

This is what I would recommend:
Instead of performing the animations in jQuery on click, give an active class to the picture element when clicked.
Perform your animations with CSS only when the picture has the active class.
Remove the class if you click on the picture element and it exists.
I would love to give you actual code, but since it's for your final, this should give you a good starting place :) Best of luck!

Try utilizing px unit values at css , js ; checking for display property of $("#info") at click of #picback to fade in , fade out #info ; reset #picback css back to initial borderRadius , height
$(document).ready(function() {
var picback = $("#picback")
, info = $("#info");
picback.click(function() {
if (info.css("display") === "none") {
$(this).animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
info.fadeIn('slow');
} else {
$(this).animate({borderRadius:120,height:230}, 'slow');
info.fadeOut('slow');
}
});
});
a {
text-decoration: none;
color: black;
text-align: center;
}
#picback {
background-color: #B8B8B8;
border-radius: 120px;
width: 230px;
height: 230px;
border: 2px solid white;
margin: 0 auto;
box-shadow: 0 0 5px;
}
#picback:hover {
box-shadow: 0px 0px 8px black;
}
#profilepic {
height: 200px;
position: relative;
top: 15px;
left: 5px;
}
#name {
font-family: 'Playball', cursive;
color: blue;
text-shadow: 0 0 3px white;
}
#age {
font-family: 'Pragati Narrow', sans-serif;
font-size: 25px;
}
#bio {
font-family: 'Roboto', sans-serif;
color: white;
}
#info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href='#'>
<div id='picback'>
<img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic'>
<div id='info'>
<h2 id='name'>Joshua T. Hurlburt</h2>
<h2 id='age'>15</h2>
<p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
</div>
</div>
</a>
codepen http://codepen.io/anon/pen/zGKepE

You should use .toggleClass() for click in the image and control the states of bio (for example collapsed and expanded) directly in css.

Here's an example of a very simple solution. Other examples posted already are a bit sexier, but I just used a variable to check whether or not it's open or closed. I also added in the basic closing animation, but you'll want to fiddle with that to make it not terrible. For example I'd suggest resetting the border radius in the callback after the animation function to prevent that ugly oval effect.
$(document).ready(function() {
var dropped = false;
$('#picback').click(function() {
if (!dropped) {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
dropped = true;
} else { // Closing animation
$('#picback').animate({
borderRadius: "50%",
height: "230px"
}, 'slow');
$('#info').fadeOut('slow');
dropped = false;
}
});
});
http://codepen.io/anon/pen/dopaJq

What you can do here is use a closure function that remembers its state:
var clickHandler = (function () {
var isOpen = false;
return function () {
isOpen = !isOpen; // Toggles between true and false
if (isOpen) {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
} else {
// Add close animation here
}
};
})();
$('#picback').click(clickHandler);

Try this code. It adds a class when animated and then checks for it before animating.
$(document).ready(function() {
$('#picback').click(function() {
var $this = $(this);
if($this.hasClass('animated')) {
$this.removeAttr('style').removeClass('animated');
} else {
$this.animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow').addClass('animated');
$('#info').fadeIn('slow');
}
});
});

with jQuery modify CSS .on mouseenter: for a specific ul li tag

New to jQuery and can't quite figure out how to achieve what I'm trying to do. Server can work only with HTML - no PHP or Ruby available (that and I'm not familiar with those languages yet). I'm also using the latest jQuery 1.10.2
What I have is a menu with tiles that each have a preview picture and a title ribbon (the to be specific), what I want is for the titles ribon background to change the opacity when mouse cursor hovers over tile.
So far I have it so that it sort of works, but the problem is that whenever a mouse cursor hovers over a tile, all the titles change the opacity, and not just the one being hovered over. I tried to get index number of a 'li' element using .index and then return it to be used as a identifier, but that didn't quite work. I also tried to do something like this:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this) <some code would come here to do stuff as mouse cursor enters the item area> ;
},
mouseleave: function () {
$(this) <some code would come here to undo stuff as mouse cursor leaves the item area>;
}
});
});
</script>
But I couldn't figure out how to continue off of that to modify the $('.tt1').css
So here's the relevant code fragments of what I have so far...
jQuery code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$('.tt1').css('opacity', '1.0');
},
mouseleave: function () {
$('.tt1').css('opacity', '0.6');
}
});
});
</script>
The HTML code:
<menu>
<ul class="collumn-left">
<li><div class="tt1">About</div></li>
<li><div class="tt1">Test</div></li>
</ul>
<ul class="collumn-right">
<li><div class="tt1">Random</div></li>
<li><div class="tt1">More</div></li>
</ul>
</menu>
The CSS code:
/* menu section begin */
menu {
background-color: silver;
box-shadow: 0 5px 10px #6A6A6A;
}
menu li {
margin: 0;
padding: 0;
display: block;
}
.collumn-left,
.collumn-right {
margin: 0;
padding: 0;
float: left;
}
.collumn-left a,
.collumn-right a {
float: left;
border: none;
list-style: none;
color: #000000;
text-decoration: none;
}
.tt1 {
background-color: grey;
opacity: 0.6;
font-weight: bolder;
text-align: center;
}
.tt1:hover {
opacity: 1.0;
}
/* menu section end */
/* Medium display size - Tablet devices & Desktops/Laptops */
#media only screen and (min-width: 1024px) and (max-width: 1280px) {
menu {
min-width: 370px;
width: 1024px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 512px;
}
.collumn-left a,
.collumn-right a {
width: 502px;
height: 502px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 325px 0 102px 0;
font-size: 35px;
line-height: 75px;
}
article {
margin: 0 10% 0 10%;
}
}
/* High Display Resolution Desktops/Laptops */
#media only screen and (min-width: 1281px) {
menu {
min-width: 370px;
width: 1540px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 770px;
}
.collumn-left a,
.collumn-right a {
width: 760px;
height: 760px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 500px 0 160px 0;
font-size: 40px;
line-height: 100px;
}
article {
margin: 0 10% 0 10%;
}
}

Try this javascript code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").css('opacity', '1.0');
},
mouseleave: function () {
$(this).find(".tt1").css('opacity', '0.6');
}
});
});
</script>
edit:
Another, maybe more cleaner way to achieve this would be the following:
CSS
.tt1:hover, .tt1.hover {
opacity: 1.0;
}
Javascript
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").addClass("hover");
},
mouseleave: function () {
$(this).find(".tt1").removeClass("hover");
}
});
});
</script>
You could easily add other features by just editing your css. For example a nice transition or different styles for smaller screens.

No need for javascript just use css
menu ul li .ttl:hover {
opacity:1.0;
}

$(this).find('.tt1').css('opacity', '1.0');
find() will look for a child element of the hovered element with the class tt1.

How to link get focus after page refresh

My problem is this: When I click in a button and then refresh the page, I want my menu clear the previous visited links (turning them to normal again), but keeping the current visited link as a:visited in css.
I think it is simple, but I am beginning in web programming, so I need help. I have found a way to make this. But the problem is it is not working!! This is the code that I have:
< ul id="menuTop">
< li id="menu-link-1">
#Html.ActionLink("Home", "Index", null, null, new { id = "link-1-visited" }) < /li>
< li id="menu-link-2">
#Html.ActionLink("Produtos", "Products", null, null, new { id = "link-2-visited" }) < /li>
< li id="menu-link-3">
#Html.ActionLink("Fale Conosco", "ContactUs", null, null, new { id = "link-3-visited" }) < /li>
< li id="menu-link-4">
#Html.ActionLink("Quem Somos", "AboutUs", null, null, new { id = "link-4-visited" }) < /li>
< /ul>
This is my buttons, and the code to make them "visited" is that:
$(document).ready(function() {
$('#link-1-visited').click(function() {
$("#menu-link-1").removeAttr("menu-link-1");
$(this).addClass('link-1-visited');
window.alert("test 1 !!");
});
$('#link-2-visited').click(function() {
$(this).addClass('link-1-visited');
window.alert("test 2 !!");
});
$('#link-3-visited').click(function() {
$(this).addClass('link-1-visited');
window.alert("test 3 !!");
});
$('#link-4-visited').click(function() {
$(this).addClass('link-1-visited');
window.alert("test 4 !!");
});
});
My code in css is:
ul#menuTop li#menu-link-1 a {
background-image: url("../Content/images/Menu/menu-image-1-alt.png");
margin-right: 1px;
}
ul#menuTop li#menu-link-1 a:hover {
background-image: url("../Content/images/Menu/menu-image-1-hover.png");
margin-right: 1px;
}
.link-1-visited {
padding: 40px 20px 20px;
border-width: 3px;
border-bottom: 0px;
// more styles below...
}
ul#menuTop li a {
border: 3px #98fb98 solid;
border-bottom: 0px;
//more styles below...
}
ul#menuTop li a:hover {
padding: 40px 20px 20px;
border-width: 3px;
border-bottom: 0px;
border-style: solid;
//more styles below...
}
The problem is my code in menu-link-1 is not working. I want to remove the ul and li css and add class "link-1-visited" to it.
Do you have any ideas about how can I do that?

Basically you need to set your links to stay one color in your css, so ...
a, a:visited {
color: blue;
}
And then you just change the color with jQuery on the click event:
$("a").click(function() {
($this).css({"color":"white"});
});
Just change the values to fit what you are using and you should be all set.
For what your trying to do, look into session variables here: Java session variables

/* change the id name according to the page link you want to make focused */
var page = document.getElementById("index").href;
if (page == index) {
document.getElementById("index").className = "active";
}
ul {
list-style-type: none;
}
li a {
display: block;
cursor: pointer;
text-decoration: none;
padding: 10px 20px;
font-size: 13.8px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
color: #555555;
font-style: normal;
white-space: nowrap;
border-radius: 10px;
transition: background-color .4s;
}
.active {
background-color: rgba(0, 0, 0, 0.9);
border-radius: 10px;
color: rgb(255, 204, 65);
}
<ul>
<li><a id="index" href="index.html">Overview</a></li>
<li><a id="wed" href="wed.html">Wedding</a></li>
<li><a id="engage" href="engage.html">Engagement</a></li>
</ul>

Optimize jQuery code

I've written this jQuery code that fades in a overlay with some links over an image. What i found out is that it is painfully slow when I add like 10 of these images. I would really appreciate some tips and tricks on how to make this code faster.
If you have some tips for my HTML and CSS that would be great too ;)
jQuery code
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
All the code
<style type="text/css">
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
img {
border: none;
}
#backgrounds {
font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 50px 0 0 0;
padding: 0;
width: 585px;
}
.thumb {
margin: 5px;
position: relative;
float: left;
}
.thumb img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.thumb div {
display: none;
}
.thumb .download {
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0 10px;
}
.thumb .download h3 {
font-size: 14px;
margin-bottom: 10px;
margin-top: 13px;
text-align: center;
}
.thumb .download a {
font-size: 11px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 16px;
}
.thumb .download a:hover {
text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
width: 44%;
margin: 0;
padding: 4px;
}
.thumb .download .left {
float: left;
text-align: right;
}
.thumb .download .right {
float: right;
text-align: left;
}
.thumb img, .thumb .hud {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.thumb .hud {
width: 100%;
height: 110px;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
</script>
<div id="backgrounds">
<div class="thumb">
<div class="download">
<h3>Download wallpaper</h3>
<p class="left">
1024x768
1280x800
1280x1024
</p>
<p class="right">
1440x900
1680x1050
1920x1200
</p>
</div>
<div class="hud"></div>
<img alt="image" src="thumb.jpg"/>
</div>
</div>

I got it to respond a little better by simply changing the following within the hover(..):
function () {
$(".download", this).fadeTo("fast", 1);
$(".hud", this).fadeTo("fast", 0.7);
},
function () {
$(".download, .hud", this).fadeTo("fast", 0);
}
The biggest difference comes from only applying the hoverout effect to the event target, no need to reapply to all your divs on the page.

I've put your code into a test page and to be perfectly honest, even with thirty or so .thumb divs it seemed ok - certainly responsive enough to use from my end. Sliding the mouse over a bunch of them means I have to wait for the rollover effect to go through them all which takes a while until it gets to the one I've actually stopped on, but surely that was what you wanted given that you're using 'hover' rather than 'click' (which would certainly remove any speed issues).
I'm not using actual images in my test page, just getting the alt text, so my best current guess would be to make sure all images you're loading are as small filesize as you can possibly make them.

Pre-Select MORE
Good job preselecting the div. Try this way so that it pre-selects the fade in elements as well instead of doing it on hover:
$().ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").each(function() {
var download = $(this).children(".download");
var hud = $(this).children(".hud");
$(this).hover(
function () {
download.fadeTo("fast", 1);
hud.fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
});

try removing the
:focus {
-moz-outline-style:none;
}
and see what happens