X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Плавная смена картинок на jQuery и IE
Vmnetwork
Vmnetwork
Topic Starter сообщение 11.8.2010, 0:39; Ответить: Vmnetwork
Сообщение #1


Сталкнулся с такой проблемой, подключил к сайту jQuery, для плавной смены картинок.. добавил код по принципу:
<script type="text/javascript">
$(window).load(

function (){
$('#div1').hover(function () { $("#div2").fadeOut(500);},function(){$("#div2").fadeIn(500);})
})

</script>
//и сама смена картинки

<div style="border: 1px solid #DC143C; width: 400;">
<div id="div">
<div id="div1" style="background-image: url(/img/picture.png); background-repeat: no-repeat">
<div id="div2" style="background-image: url(/img/picture.png); background-repeat: no-repeat"></div>
</div>
</div>


Все меняется отлично, но вот в IE появляется коемка какая то при смене картинки - http://www.owescon.ru/

сам код в оригинале:
<script type="text/javascript">
$(window).load(

function (){
$('#div1').hover(function () { $("#div2").fadeOut(500);},function(){$("#div2").fadeIn(500);})
$('#div3').hover(function () { $("#div4").fadeOut(500);},function(){$("#div4").fadeIn(500);})
$('#div5').hover(function () { $("#div6").fadeOut(500);},function(){$("#div6").fadeIn(500);})

$('#div7').hover(function () { $("#div8").fadeOut(500);},function(){$("#div8").fadeIn(500);})
$('#div9').hover(function () { $("#div10").fadeOut(500);},function(){$("#div10").fadeIn(500);})
$('#div11').hover(function () { $("#div12").fadeOut(500);},function(){$("#div12").fadeIn(500);})

});

</script>
<style>
div.out12 { width:282px; height:73px; cellpadding="0"; cellpadding="0"; border: 0px;
           }
div.in12 { width:282px; height:73px; cellpadding="0"; cellpadding="0"; border: 0px;
          }
div.out11 { width:282px; height:73px; cellpadding="0"; cellpadding="0"; border: 0px;
           }
</style>

и пример вставки
<div class="out11">
<div class="out11" id="div"><a href="index.php?section=about">
<div class="in12" id="div3" style="background-image: url(./templates/zakon1152/images/1eppt.png); background-repeat: no-repeat">
<div class="out12" id="div4" style="background-image: url(./templates/zakon1152/images/2eppt.png); background-repeat: no-repeat"></div>
</div></a>
</div></div>


Кто нибудь может сказать в чем может быть проблема, удалял файлы CSS сайта, всеравно на белом фоне даже появляется коемка при смене картинки, может быть что то прописать в CSS или подправить в JAVA??? и эта проблема только в IE
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 11.8.2010, 8:30; Ответить: Arks
Сообщение #2


В IE6 у меня вообще верстка не пашет. В IE7- черная коемка, думаю это особенность обработки прозрачных краешков и мало связано с css. Советую поэкспериментировать с настройками при сохранении .png т.к. fadeIn/fadeOut это всего лишь плавное кроссбраузерное изменение параметра opacity
Да, и собственно на время выполнения и после fadeIn/fadeOut устанавливается css display:block

Вот нарезка из jQuery 1.4.2 Dev:

// exclude the following css properties to add px
var rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
ralpha = /alpha\([^)]*\)/,
ropacity = /opacity=([^)]*)/,
rfloat = /float/i,
rdashAlpha = /-([a-z])/ig,
rupper = /([A-Z])/g,
rnumpx = /^-?\d+(?:px)?$/i,
rnum = /^-?\d/,

cssShow = { position: "absolute", visibility: "hidden", display:"block" },
cssWidth = [ "Left", "Right" ],
cssHeight = [ "Top", "Bottom" ],

// cache check for defaultView.getComputedStyle
getComputedStyle = document.defaultView && document.defaultView.getComputedStyle,
// normalize float css property
styleFloat = jQuery.support.cssFloat ? "cssFloat" : "styleFloat",
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
};

jQuery.fn.css = function( name, value ) {
return access( this, name, value, true, function( elem, name, value ) {
if ( value === undefined ) {
return jQuery.curCSS( elem, name );
}

if ( typeof value === "number" && !rexclude.test(name) ) {
value += "px";
}

jQuery.style( elem, name, value );
});
};
метод доступа:
function access( elems, key, value, exec, fn, pass ) {
var length = elems.length;

// Setting many attributes
if ( typeof key === "object" ) {
for ( var k in key ) {
access( elems, k, key[k], exec, fn, value );
}
return elems;
}

// Setting one attribute
if ( value !== undefined ) {
// Optionally, function values get executed if exec is true
exec = !pass && exec && jQuery.isFunction(value);

for ( var i = 0; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
}

return elems;
}

// Getting an attribute
return length ? fn( elems[0], key ) : undefined;
}
для IE в jQuery по-умолчанию также используется следующая надстройка:
// IE uses filters for opacity
if ( !jQuery.support.opacity && name === "opacity" ) {
if ( set ) {
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
style.zoom = 1;

// Set the alpha filter to set the opacity
var opacity = parseInt( value, 10 ) + "" === "NaN" ? "" : "alpha(opacity=" + value * 100 + ")";
var filter = style.filter || jQuery.curCSS( elem, "filter" ) || "";
style.filter = ralpha.test(filter) ? filter.replace(ralpha, opacity) : opacity;
}

return style.filter && style.filter.indexOf("opacity=") >= 0 ?
(parseFloat( ropacity.exec(style.filter)[1] ) / 100) + "":
"";
}
Метод curCSS:
curCSS: function( elem, name, force ) {
var ret, style = elem.style, filter;

// IE uses filters for opacity
if ( !jQuery.support.opacity && name === "opacity" && elem.currentStyle ) {
ret = ropacity.test(elem.currentStyle.filter || "") ?
(parseFloat(RegExp.$1) / 100) + "" :
"";

return ret === "" ?
"1" :
ret;
}

// Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) {
name = styleFloat;
}

if ( !force && style && style[ name ] ) {
ret = style[ name ];

} else if ( getComputedStyle ) {

// Only "float" is needed here
if ( rfloat.test( name ) ) {
name = "float";
}

name = name.replace( rupper, "-$1" ).toLowerCase();

var defaultView = elem.ownerDocument.defaultView;

if ( !defaultView ) {
return null;
}

var computedStyle = defaultView.getComputedStyle( elem, null );

if ( computedStyle ) {
ret = computedStyle.getPropertyValue( name );
}

// We should always get a number back from opacity
if ( name === "opacity" && ret === "" ) {
ret = "1";
}

} else if ( elem.currentStyle ) {
var camelCase = name.replace(rdashAlpha, fcamelCase);

ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];

// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18...#comment-102291

// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
if ( !rnumpx.test( ret ) && rnum.test( ret ) ) {
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;

// Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = camelCase === "fontSize" ? "1em" : (ret || 0);
ret = style.pixelLeft + "px";

// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}

return ret;
}
Ну вот считайте все что отвечает за fadeIn/Out в Jquery приведено
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebMage_hb
WebMage_hb
сообщение 26.7.2011, 15:30; Ответить: WebMage_hb
Сообщение #3


просто хочу похвастаться как получилось у меня http://alwow.ru/pages/skript

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1171 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44766 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Ukr Private Proxy 4g Lifecell, Kyivstar, Vodafone (ТЕСТ, смена по ссылке, ротация)
Продам Личные Украинские приватные мобильные прокси 4g Lifecell, Kyivs
1 Kostyaxxxx 4244 20.6.2021, 20:26
автор: Kostyaxxxx
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
1 byteeightlab 1459 2.7.2019, 7:37
автор: ychervov
Открытая тема (нет новых ответов) [ИЩУ] Человека для сбора картинок
4 rokot 3214 4.9.2018, 10:05
автор: Том77


 



RSS Текстовая версия Сейчас: 29.3.2024, 6:20
Дизайн