| razorg1991 |
21.11.2012 20:37 |
Не работает скрипт hover кнопки
Не пойму в чем проблема, уже че токо не делал, и с бубном танцевал в том числе.
Нарыл в инете классный скрипт:
Код:
<script type="text/javascript">
$(function () {
$('#button a')
// create our new span.hover and loop through anchor:
.append('<span class="hover" id="buttoncolor"/>').each(function () {
// cache a copy of the span, at the same time changing the opacity
// to zero in preparation of the page being loaded
var $span = $('> span.hover', this).css('opacity', 0);
// when the user hovers in and out of the anchor
$(this).hover(function () {
// on hover
// stop any animations currently running, and fade to opacity: 1
$span.stop().fadeTo(800, 1);
}, function () {
// off hover
// again, stop any animations currently running, and fade out
$span.stop().fadeTo(800, 0);
});
});
});
</script>
Переделал под свои нужды (и сам скрипт простой до безобразия), только почему-то ни фига не работает:(
Вот мой файл индекса:
Код:
<?php
defined('_JEXEC') or die;
JHtml::_('behavior.framework', true);
$app = JFactory::getApplication();
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/saytostroy_v2/css/template.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/saytostroy_v2/css/system.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/saytostroy_v2/css/menu.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/saytostroy_v2/js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/saytostroy_v2/js/jquery.easing.min.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/saytostroy_v2/js/jquery.lavalamp.min.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/saytostroy_v2/js/cufon.yui.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/saytostroy_v2/js/myriad.js" ></script>
<script type="text/javascript">
$(function() {
$("#menu ul.menu").lavaLamp({
fx: "backout",
speed: 700,
});
});
</script>
<script type="text/javascript">
$(function () {
$('#button a')
// create our new span.hover and loop through anchor:
.append('<span class="hover" id="buttoncolor"/>').each(function () {
// cache a copy of the span, at the same time changing the opacity
// to zero in preparation of the page being loaded
var $span = $('> span.hover', this).css('opacity', 0);
// when the user hovers in and out of the anchor
$(this).hover(function () {
// on hover
// stop any animations currently running, and fade to opacity: 1
$span.stop().fadeTo(800, 1);
}, function () {
// off hover
// again, stop any animations currently running, and fade out
$span.stop().fadeTo(800, 0);
});
});
});
</script>
<?php
if($this->countModules('contentright') == 0) $contentwidth = "980px";
if($this->countModules('contentright') == 1) $contentwidth = "655px";
?>
<link rel="icon" href="/templates/saytostroy/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/templates/saytostroy/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="conteiner">
<div id="main">
<div id="header">
<div id="header_content">
<div id="menu"><jdoc:include type="modules" name="topmenu" style="none" /></div>
<div id="logo"></div>
</div>
</div>
<div id="wraper">
<div id="line"></div>
<div id="wraper_content">
<div id="wraper_slider"></div>
<div id="wraper_welcome"><jdoc:include type="modules" name="wrapercontent" style="xhtml" /></div>
</div>
</div>
<div id="main_content">
<div id="top_box">
<div id="button">
<a href="<?php echo $this->baseurl ?>/index.php?option=com_content&view=article&id=76">Узнать подробнее</a>
</div>
<div id="top_box_content"><jdoc:include type="modules" name="topboxcontent" style="xhtml" /></div>
</div>
<div id="divider"></div>
<div id="content_box">
<?php if($this->countModules('contentright')) : ?>
<div id="content_right"><jdoc:include type="modules" name="contentright" style="xhtml" /></div>
<?php endif; ?>
<div id="content_left<?php echo $contentwidth; ?>"><jdoc:include type="component" /></div>
</div>
<div id="divider"></div>
<div id="box_space"></div>
<div id="bottom_boxes">
<div id="box_right"><jdoc:include type="modules" name="boxright" style="xhtml" /></div>
<div id="box_center"><jdoc:include type="modules" name="boxcenter" style="xhtml" /></div>
<div id="box_left"><jdoc:include type="modules" name="boxleft" style="xhtml" /></div>
</div>
<div id="box_space"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_boxes">
<div id="footer_boxes_content">
<div id="footer_box_4"><jdoc:include type="modules" name="footerbox4" style="xhtml" /></div>
<div id="footer_box_3"><jdoc:include type="modules" name="footerbox3" style="xhtml" /></div>
<div id="footer_box_2"><jdoc:include type="modules" name="footerbox2" style="xhtml" /></div>
<div id="footer_box_1"><jdoc:include type="modules" name="footerbox1" style="xhtml" /></div>
</div>
</div>
<div id="footer_copyright">
<div id="line_footer"></div>
<div id="footer_content"><jdoc:include type="modules" name="footercopyright" style="xhtml" /></div>
</div>
</div>
</body>
</html>
ВОт частично CSS:
Код:
#button{
padding:0;
margin:0;
border:none;
width:240px;
height:60px;
background:none;
float:right;
position:relative;
}
#button a {
color: #606060; /* Цвет текста ссылки */
text-decoration: none; /* Убираем подчеркивание ссылки */
background:url(../images/Button.png) no-repeat left; /* Фон кнопки по умолчанию */
border:none; /* Обводка кнопки */
width:240px;
height:45px;
display:block;
text-align:center;
font-size:25px;
padding-top:15px;
position:relative;
}
#button span.hover{
background:url(../images/Button_hover.png) no-repeat left;
color:#FFF;
border:none; /* Обводка кнопки */
width:240px;
height:45px;
display:block;
text-align:center;
font-size:25px;
padding-top:15px;
text-decoration:none;
position:relative;
}
Вот на всякий случай исходник, где я это откапал
http://ruseller.com/lessons/les236/example/index.html
А теперь объясните кто-нибудь пожалуйста что я сделал не так? Уже мозг просто кипит |