Не работает fadeOut fadeIn fadeTo
Всем привет. Написал простенький код, который скрывает и открывает блоки по нажатию кнопки. ВСе бы ничего, но есть одно НО. У меня, почему-то, не хотят работать такие функции, как fadeOut, fadeIn, fadeTo. Пришлось заменять их на Show, Hide, что не есть хорошо. Хочется плавной анимации. Что делать, в чем ошибка?
Вот код:
$(document).ready(function()
{
$('div#mblock2, div#mblock3, div.mbut1').hide();
$('div.mbut1').click(function()
{
$('div#mblock1, div.mbut2, div.mbut3').show();
$('div#mblock2, div#mblock3, div.mbut1').fadeIn(2000);
});
$('div.mbut2').click(function()
{
$('div#mblock2, div.mbut1, div.mbut3').show();
$('div#mblock1, div#mblock3, div.mbut2').fadeIn(2000);
});
$('div.mbut3').click(function()
{
$('div#mblock3, div.mbut1, div.mbut2').show();
$('div#mblock1, div#mblock2, div.mbut3').fadeIn(2000);
});
});
|
Сершей,
нерабочий пример с html разместите здесь. |
Это и есть нерабочий пример скрипта. Не понимаю, что значит пример с html? Сайт делаю локально на денвере, так что скинуть не могу(
Вот кусок код html, с которым связан скрипт: <div id="slidemenu"> <div class="mbut1"></div> <div class="mbut2"></div> <div class="mbut3"></div> <div id="mblock1"> <jdoc:include type="modules" name="block1" /> </div> <div id="mblock2"> <jdoc:include type="modules" name="block2" /> </div> <div id="mblock3"> <jdoc:include type="modules" name="block3" /> </div> <jdoc:include type="modules" name="user4" /> </div> Есть ли какие-нибудь альтернативные функции fadeOut fadeIn?? |
Какая версия jQuery? И что значит "не хотят работать"? Они объявили голодовку? Или устраивают митинг? Или просто капризничают? Можете пояснить?
|
Сершей, вот что требовалось -- а сейчас опишите что не так работает но какбы хотелось чтоб работало - алгоритм
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div#mblock1, div#mblock2, div#mblock3{
background-color: #FFD700;
}
div.mbut1, div.mbut2, div.mbut3{
background-color: #228B22;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function()
{
$('div#mblock2, div#mblock3, div.mbut1').fadeOut();
$('div.mbut1').click(function()
{
$('div#mblock1, div.mbut2, div.mbut3').fadeIn(2000);
$('div#mblock2, div#mblock3, div.mbut1').fadeOut(2000);
});
$('div.mbut2').click(function()
{
$('div#mblock2, div.mbut1, div.mbut3').fadeIn(2000);
$('div#mblock1, div#mblock3, div.mbut2' ).fadeOut(2000);
});
$('div.mbut3').click(function()
{
$('div#mblock3, div.mbut1, div.mbut2').fadeIn(2000);
$('div#mblock1, div#mblock2, div.mbut3').fadeOut(2000);
});
});
</script>
</head>
<body>
<div id="slidemenu">
<div class="mbut1">1</div>
<div class="mbut2">2</div>
<div class="mbut3">3</div>
<div id="mblock1">1111</div>
<div id="mblock2">2222</div>
<div id="mblock3">3333</div>
</div>
</body>
</html>
|
Вложений: 1
Итак, во вложении есть наглядная картинка. Требуется, чтобы при нажатии на среднюю синюю кнопку все блоки исчезали и появлялся средний блок, на правую - все блоки исчезают, правый - появляется. Всё это должно происходить плавно, не резко.
jquery - подключал вот эту версию: jquery-1.10.2.min.js Сам скрипт тоже подключал к файлу index.php вот таким образом: <script type="text/javascript" src="<?php echo $path ?>/javascript/menu.js"></script> Не хотят работать - означает, что как будто там fadeIn и fadeOut и нету, то есть при нажатии на кнопку ничего не происходит. Вот полный файл index.php, если требуется (увы, с нуля делал его не я, поэтому там пока что находится много чего лишнего):
<?php
/**
* @version $Id: index.php 21518 2011-06-10 21:38:12Z chdemko $
* @package Joomla.Site
* @subpackage
* @copyright Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access.
defined('_JEXEC') or die;
$path = $this->baseurl.'/templates/'.$this->template;
error_reporting( E_ERROR );
JHtml::_('behavior.framework', true);
// get params
$logo = $this->params->get('logo');
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$templateparams = $app->getTemplate(true)->params;
?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<?php
$itemid = JRequest::getVar('Itemid');
$menu = &JSite::getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
?><head>
<script type="text/javascript" src="http://kr-pc.ru/test/jquery-1.3.2.js"></script>
<jdoc:include type="head" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="<?php echo $path ?>/css/position.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/layout.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/general.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/personal.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/style.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/grid.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="<?php echo $path ?>/css/print.css" type="text/css" media="print" />
<script type="text/javascript" src="<?php echo $path ?>/javascript/modernizr-1.6.min.js"></script>
<?php if (!$this->countModules('slider')): ?>
<script type="text/javascript" src="<?php echo $path ?>/javascript/jquery.js"></script>
<?php endif;?>
<script type='text/javascript' src='<?php echo $path ?>/javascript/mosaic.1.0.1.min.js'></script>
<script type='text/javascript' src='<?php echo $path ?>/javascript/jquery.easing.js'></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/Chaparral_Pro_400.font.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/Chaparral_Pro_700.font.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/jquery.faded.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/superfish.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/menu.js"></script>
<script type="text/javascript" src="<?php echo $path ?>/javascript/blocks.js"></script>
</head>
<body class=" <?php echo $pageclass; ?>">
<div id="all">
<div id="header">
<div id="headermenu"><jdoc:include type="modules" name="user7" style="xhtml" /></div>
</div>
<div id="navig" class="default">
<div id="navigmenu">
<div class="navig">
<nav><jdoc:include type="modules" name="user1" /></nav>
<jdoc:include type="modules" name="user2" />
</div>
</div>
</div>
<?if (strpos($_SERVER['REQUEST_URI'], '/index.php')!== false){?>
<div id="noslide"</div>
<?}else{?>
<div id="slide">
<div id="slidesvet">
<div id="slidemenu">
<div class="mbut1"></div>
<div class="mbut2"></div>
<div class="mbut3"></div>
<div id="mblock1">
<jdoc:include type="modules" name="block1" />
</div>
<div id="mblock2">
<jdoc:include type="modules" name="block2" />
</div>
<div id="mblock3">
<jdoc:include type="modules" name="block3" />
</div>
<jdoc:include type="modules" name="user4" />
</div>
</div>
</div>
<?}?>
<div id="all2">
<div id="content" >
<?php if($this->countModules('slider')) : ?>
<div id="message">
<jdoc:include type="modules" name="slider" />
</div>
<?php endif; ?>
<?php if($this->countModules('top')) : ?>
<div id="message">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php endif; ?>
<div class="padding_content">
<jdoc:include type="message" />
<div class="wrapper_overflow">
<?php if($this->countModules('left')) : ?>
<div id="sidebar-1" >
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2" >
<jdoc:include type="modules" name="right" style="xhtml" /></div>
<?php endif; ?>
<div id="maincolbck">
<div id="maincolumn" >
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" />
</div>
</div>
</div>
</div>
</div>
<?php if($this->countModules('user3')) : ?>
<div class="bottom_row">
<div class="center">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('user5')) : ?>
<div class="bottom_row2">
<div class="center">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules('user8')) : ?>
<div class="bottom_row3">
<div class="center">
<jdoc:include type="modules" name="user8" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div class="push"></div>
</div>
<div id="footer-outer">
<div id="footer-sub">
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="user6" style="xhtml" />
</div>
</div>
<!-- end footer -->
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
|
Что в консоли ошибок браузера (она есть в любом браузере)?
|
Сершей,
код вверху в 5 посте так работает как выхотели или нет? |
Да, всё работает! Спасибо огромное! Не знаю в чем дело было, но теперь, когда я почистил немного файл index.php, всё заработало. Видимо скрипт с чем-то конфликтовал.
|
| Часовой пояс GMT +3, время: 13:51. |